我正在尝试更改选项卡菜单中事件标题选项卡的背景颜色。
标签
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>最佳答案
使用 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 .
编辑:
要引用 jQuery，请将其添加到 <head> 中您的文档:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
关于html - 如何使用 css 更改选项卡标题背景的事件颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38747453/