引导选项卡显示，但在单击之前不会突出显示。

Question

我正在使用(v3.0.3) Tabs，除了.我标记为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>

注意，在jsFiddle中，active选项卡是打开的，但没有在视觉上突出显示。如果您将active 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>