cssを使用してタブタイトルの背景色を変更するには

タブメニューのアクティブなタイトルタブの背景色を変更しようとしています。cssを使用してタブタイトルの背景色を変更するには

// Bind a function to the `click` event of elements matching the selector `.tabs-title` 
// Note that within a jQuery function, `$(this)` is the current element represented as a jQuery element object. 
$(".tabs-title > a").click(function() { 
    // For each element with the class selector `.tabs-title` 
    $(".tabs-title").each(function() { 
     // Remove the class "is-active" from the current element in the loop 
     $(this).removeClass("is-active") 
    }) 

    // Get the parent of the clicked `a` element (i.e., the `.tabs-title` element), then add the class. 
    $(this).parent().addClass("is-active"); 
})

jsFiddle：jQueryの（場合は、コメントの多くのjQueryの構文はあなたに新しいです）を使用して

タブ

li.is-active { 
 
    
 
    background-color:blue; 
 
    
 
    }

 <div class="row"> 
 
     <div class="medium-12 columns"> 
 
    <ul class="tabs" data-tabs id="authentication_tab"> 
 
     <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li> 
 
     <li class="tabs-title"><a href="#panel2">Tab 2</a></li> 
 
    </ul> 
 
    <div class="tabs-content" data-tabs-content="authentication_tab"> 
 
     <div class="tabs-panel is-active" id="panel1"> 
 
     <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p> 
 
     </div> 
 
     <div class="tabs-panel" id="panel2"> 
 
     <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div>

出典

2016-08-03 thomaSmith

このフィドルに細かい動作しているようだ。https://jsfiddle.net/dvo37ca1/ jsfiddleを使用して問題を再現できますか？ –

クリックしてis-activeクラスを削除して追加するには、いくつかのJSが必要です。 –

。

EDIT：

ドキュメントの<head>以内にこれを追加し、jQueryのを参照するために：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

出典

2016-08-03 15:23:47

これを実装するとうまくいきません。 – thomaSmith

これは間違いなく機能します.jsFiddleを確認してください。コードを正確にコピーしていますか？あなたのHTMLコードでもjQueryを参照しましたか？私はそれを行う方法に関する答えを更新します。 –

@thomaSmith更新を参照してください。 –

cssを使用してタブタイトルの背景色を変更するには

答えて

関連する問題