更改活动选项卡上的背景颜色

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');
});