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

在活动标签上更改背景颜色

1 个答案: