如何在Bootstrap 3导航栏中更改活动选项卡的背景颜色？

Question

我有一个导航栏，其中包含几个项目。如果当前选中了某个选项卡，则会分配类活动（active）的类。如果具有类 active，我希望将该选项卡的背景颜色设置为该选项卡。以下是示例：

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？如果有人知道简单的方法，请告诉我。

- espresso_coffee

---

我刚刚重新阅读了您的问题，并认为我在第一条评论中误解了。那么，您是不是想自动匹配选项卡的背景颜色，无论颜色是什么？即，如果选项卡的背景颜色是红色，则将其复制到链接中？ - Lewis

@Lewis，我找到了解决方案。请检查更新版本。 - espresso_coffee

啊，好的 - 只是硬编码颜色。这很有道理。 - Lewis

你不应该这样做。它会全局覆盖任何跟随该嵌套.active a的内容（除非你使用CSS模块）。你至少应该定义一个范围.nav-tabs .active a。 - dysfunc

这是不使用!important的可行变更: https://codepen.io/anon/pen/oMBXqq - dysfunc

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中修改LESS变量@navbar-default-link-active-bg和@navbar-default-link-active-color

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

演示不使用important

- dysfunc

---

尝试使用.active a { background-color: #E0E0E0 !important;}。 - espresso_coffee

Answer 2

这是一个与你所尝试的相关工作示例：JsFiddle。

.nav-tabs li.active  a{
  display: block;
  background-color: tomato !important;
}

- thezeeshantariq

Answer 3

如果将来有人在Bootstrap 5中寻找相同的内容。

.nav-tabs button.active {
    background-color: tomato !important;     
}

- Mr. Learner

Answer 4

将 .active a { background-color: #E0E0E0 !important;} 添加到您的CSS中。它将使选项卡的颜色与容器相同。以下是有效代码：

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>

- Vikasdeep Singh