如何在不單擊的情況下將活動標簽的背景顏色更改為選定標簽？

Question

單擊時更改選項卡的背景色效果很好，但是我啟用了第一個選項卡，我想使其顏色與所選選項卡相同，並在選擇另一個選項卡時將其顏色移除

在這里http://jsfiddle.net/zjjpocv6/541/

 $(function() { $('#navigation li').click(function() { $('#navigation li').removeClass('selected'); $(this).addClass('selected'); }); }); 

 .selected{ background-color: blue; } 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <ul class="nav nav-tabs" role="tablist" id="navigation"> <li role="presentation" class="active" > <a href="#supervisorInfo" role="tab" data-toggle="tab">Tab 1</a> </li> <li role="presentation"> <a href="#studentsInfo" role="tab" data-toggle="tab">Tab 2</a> </li> <li role="presentation"> <a href="#reportSummary" role="tab" data-toggle="tab">Tab 2</a> </li> <li class="float-right"> <input type="submit" value="Save" class="float-right btn btn-primary" /> </li> </ul> 

Answer 1

只需為最初處於活動狀態的選項卡提供selected類：

<li role="presentation" class="active selected" >

 $(function() { $('#navigation li').click(function() { $('#navigation li').removeClass('selected'); $(this).addClass('selected'); }); }); 

 .selected{ background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <ul class="nav nav-tabs" role="tablist" id="navigation"> <li role="presentation" class="active selected" > <a href="#supervisorInfo" role="tab" data-toggle="tab">Tab 1</a> </li> <li role="presentation"> <a href="#studentsInfo" role="tab" data-toggle="tab">Tab 2</a> </li> <li role="presentation"> <a href="#reportSummary" role="tab" data-toggle="tab">Tab 2</a> </li> <li class="float-right"> <input type="submit" value="Save" class="float-right btn btn-primary" /> </li> </ul> 

Answer 2

添加此CSS

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