引導選項卡顯示，但不會突出顯示，直到點擊

Question

我使用的是Twitter Bootstrap（v3.0.3）選項卡，除了...我標記爲active的選項卡不會在視覺上突出顯示，除非您單擊它。

有意思的是，我可以使用的jsfiddle從Twitter的引導網站的示例代碼重現此問題：

引導例：http://getbootstrap.com/javascript/#tabs
的jsfiddle：http://jsfiddle.net/uXV56/

標籤的實例代碼：

<!-- Nav tabs --> 
<ul class="nav nav-tabs"> 
    <li><a href="#home" data-toggle="tab">Home</a></li> 
    <li><a href="#profile" data-toggle="tab">Profile</a></li> 
    <li><a href="#messages" data-toggle="tab">Messages</a></li> 
    <li><a href="#settings" data-toggle="tab">Settings</a></li> 
</ul> 

<!-- Tab panes --> 
<div class="tab-content"> 
    <div class="tab-pane active" id="home">...</div> 
    <div class="tab-pane" id="profile">...</div> 
    <div class="tab-pane" id="messages">...</div> 
    <div class="tab-pane" id="settings">...</div> 
</div> 

注意在jsFildle active選項卡是打開的bu沒有直觀地突出顯示。如果您將css類移動到不同的選項卡，並設置某種內容以便您可以區分它們，您會看到Bootstrap正在讀取該類，並默認打開正確的選項卡，但不會突出顯示它。 。如果您單擊任何選項卡（包括當前活動的選項卡），則視覺提示將突出顯示該選項卡。

Answer 1

引導標籤由兩個獨立的組件組成：標籤導航（ul.nav.nav-tabs > li > a）和標籤內容（div.tab-content > div.tab-pane）。

您必須激活這兩個組件才能正常工作，因爲div.tab-pane.active用於顯示正確的選項卡窗格。菜單中的視覺提示由li.active > a管理。

因此，將您的示例更改爲此，並且一切正常。

<!-- Nav tabs --> 
<ul class="nav nav-tabs"> 
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li> 
    <li><a href="#profile" data-toggle="tab">Profile</a></li> 
    <li><a href="#messages" data-toggle="tab">Messages</a></li> 
    <li><a href="#settings" data-toggle="tab">Settings</a></li> 
</ul> 

<!-- Tab panes --> 
<div class="tab-content"> 
    <div class="tab-pane active" id="home">...</div> 
    <div class="tab-pane" id="profile">...</div> 
    <div class="tab-pane" id="messages">...</div> 
    <div class="tab-pane" id="settings">...</div> 
</div>