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变量

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

DEMO WITHOUT USING IMPORTANT

Answer 2

将.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>

Answer 3

这是您要尝试的工作示例：JsFiddle

<system.web>
    <compilation debug="false" targetFramework="4.5.1" />
</system.web>

如何在Bootstrap 3导航栏中更改活动标签的背景颜色？

3 个答案: