如何在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變量

您應該在引導樣式表包含或sass導入后包含此CSS更改，以避免使用!important來覆蓋

演示沒有使用重要

Answer 2

將。 .active a { background-color: #E0E0E0 !important;}到您的CSS中。 它將使tab的顏色與容器相同。 以下是工作代碼：

 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

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