如何爲導航欄的活動選項卡提供樣式

Question

這是我的HTML代碼。我想主動CSS樣式nav-tab.Now我想，當我的頁面加載位置標籤應該具有藍色背景我怎樣讓這個

<div class="row"> 
     <div class="col-sm-12 col-xs-12 col-lg-12 col-md-12 welcome"> 
      <ul class="nav navbar-nav navbar-nav-primary"> 
       <li class="active"> 
        <a href="#one" data-toggle="tab"> 
         <i class="fa fa-map-marker" aria-hidden="true"></i> 
     <span class="li-text">Location</span> 
        </a> 
       </li> 
       <li> 
        <a href="#two" data-toggle="tab"> 
         <i class="fa fa-heartbeat" aria-hidden="true"></i> <span class="li-text">Heartbeats</span> 
        </a> 
       </li> 
       <li> 
        <a href="#three" data-toggle="tab"> 
         <i class="fa fa-power-off" aria-hidden="true"></i> 
         <span class="li-text">Reboots</span> 
        </a> 
       </li> 
       <li> 
        <a href="#four" data-toggle="tab"> 
         <i class="fa fa-compress" aria-hidden="true"></i> 
         <span class="li-text">Reconnects</span> 
        </a> 
       </li> 
       <li> 
        <a href="#five" data-toggle="tab"> 
         <i class="fa fa-battery-full" aria-hidden="true"></i> 
         <span class="li-text">Charge</span> 
        </a> 
       </li> 

      </ul> 

     </div> 

位置標籤是有源標籤

  <div id="one" class="tab-pane active"> 

       <div class="row"> 
        <div class="col-sm-offset-10 col-md-offset-10 col-xs-offset-10 col-lg-offset-10 col-sm-2 col-md-2 col-xs-2 col-lg-2 searchDiv"> 
         <div class="row"> 
          <div class="col-sm-1 col-xs-1 col-lg-1 col-md-1"> 
           <i class="fa fa-search fa-2x" aria-hidden="true"></i> 
          </div> 
          <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"> 

           <i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i> 
          </div> 
         </div> 
        </div> 
       </div> 

       <div class="tab-pane active" id="1a"> 
        <div ui-grid="gridOptions" class="grid-table" ui-grid-auto-resize ui-grid-cellNav ui-grid-edit ui-grid-resize-columns ui-grid-pinning ng-style="getTableHeight()"></div> 
       </div> 
      </div> 

現在我想要當我的頁面加載位置選項卡應該有藍色背景我怎麼能得到的。

Answer 1

試試這個

CSS

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

Link for reference

希望這有助於..

Answer 2

您可以使用它像這樣

.tab-pane.active { 
    background : blue; // or your desired color code. 
}