html - 更改事件选项卡上的背景颜色

Question

我需要更改悬停时和事件时选项卡的背景颜色。

我的HTML代码

    <div class="tabs">
     <ul class="nav nav-tabs" role="tablist">
     <li><a data-toggle="tab" role="tab" href="#Tab1" name="t1">Tab1</a></li>
     <li><a data-toggle="tab" role="tab" href="#Tab2">Tab2</a></li>
     <li><a data-toggle="tab" role="tab" href="#Tab3">Tab3</a></li>
    </ul>
   <div class="tab-content">
    <div class="tab-pane fade show active" id="Tab1">
      -------------
    </div>
    <div class="tab-pane fade" id="Tab2">
       -------------
    </div>
    <div class="tab-pane fade" id="Tab3">
       ----------------
    </div>
   </div>
   </div>

我的 CSS 代码

.tabs a:hover,.tabs a:active{
  background:#bbb;
}

在选项卡上悬停颜色正在改变，但在选择选项卡时颜色保持不变。

Answer 1

您需要在事件选项卡元素上设置一个类(使用 JS 的最佳方式)。 设置类后，您可以通过 CSS 更改颜色:

.tabs a:hover,
.tabs a.active { background-color:#bbb; }

如果你想使用 jQuery:

$('.tabs a').on('click', function(){
  $('.tabs .active').removeClass('active');
  $(this).addClass('active');
});