如何使用css更改選項卡標題背景的活動顏色

Question

我試圖更改我的選項卡菜單中活動標題選項卡的背景顏色。

標籤

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>

Answer 1

使用jQuery（很多的情況下，意見的jQuery的語法是新的給你）：

// 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。

編輯：

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