javascript - 如何更改 Bootstrap 3 导航栏中事件选项卡的背景颜色？

Question

我有几个元素的导航栏。如果当前已选中，则每个选项卡都分配有事件类。如果有事件类，我想为该选项卡设置背景颜色。这是示例:

div.admin-box {
	background-color: #E0E0E0;
}

.active a {
  background-color: #E0E0E0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#tab-1">Tab 1</a></li>
    <li><a data-toggle="tab" href="#tab-2">Tab 2</a></li>
    <li><a data-toggle="tab" href="#tab-3">Tab 3</a></li>
    <li><a data-toggle="tab" href="#tab-4">Tab 4</a></li>
</ul>
<div class="tab-content">
    <!-- Tab 1 -->
    <div id="tab-1" class="tab-pane fade in active admin-box">
      Tab 1 content.
    </div>
    <!-- Tab 2 -->
    <div id="tab-2" class="tab-pane fade admin-box">
      Tab 2 content
    </div>
    <!-- Tab 3 -->
    <div id="tab-3" class="tab-pane fade admin-box">
      Tab 3 content.
    </div>
    <!-- Tab 4 -->
    <div id="tab-4" class="tab-pane fade admin-box">
      Tab 4 content.
    </div>
</div>

如您所见，每个选项卡容器都有背景颜色。因此，所选选项卡应具有相同的背景颜色以匹配容器背景。有没有一种方法可以通过纯 CSS 或 JS 来实现？如果有人知道执行此操作的简单方法，请告诉我。

Answer 1

您需要修改 .nav-tabs > li.active > a 的 CSS

.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:focus, 
.nav-tabs > li.active > a:hover {
  background-color: red;
}

您还可以修改 v3 @navbar-default-link-active-bg 和 @navbar-default-link-active-color 中的 LESS 变量

>

您应该在 Bootstrap 样式表包含或 sass 导入之后包含此 CSS 更改，以避免使用 !important 覆盖

DEMO WITHOUT USING IMPORTANT