Bootstrap Tab shows but does not highlight until clicked

问题

I am using Twitter Bootstrap (v3.0.3) Tabs, and they are working perfectly except... the tab that I have marked as active does not visually highlight unless you click on it.

The interesting thing is I can reproduce this behavior using jsFiddle and the example code from the Twitter Bootstrap website:

Bootstrap Example: http://getbootstrap.com/javascript/#tabs
jsFiddle: http://jsfiddle.net/uXV56/

Example Tab Code:

<!-- 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>

Note in jsFiddle that the active tab is open but not visually highlighted. If you move the active css class to a different tab, and set some kind of content so you can tell them apart, you'll see that Bootstrap is reading that class and opening the correct tab by default, it's just not highlighting it... If you click on any tab, including the currently active one, the visual cue shows up highlighting the tab.

回答1:

Bootstrap Tabs consist of two separate components: the tab-navigation (ul.nav.nav-tabs > li > a) and the tab contents (div.tab-content > div.tab-pane).

You have to activate both components for this to work, because div.tab-pane.active is used for displaying the correct tab-pane. The visual cue in the menu is managed by the li.active > a.

So, change your example to this, and everything works OK.

<!-- 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>

来源：https://stackoverflow.com/questions/21169929/bootstrap-tab-shows-but-does-not-highlight-until-clicked

标签

jquery

twitter-bootstrap

tabs