Question

我正在使用Twitter Bootstrap（v3.0.3）标签，除了......我标记为active的标签在视觉上不会突出显示，除非您点击它。

有趣的是，我可以使用jsFiddle和Twitter Bootstrap网站上的示例代码重现此行为：

Bootstrap示例：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

Bootstrap选项卡由两个独立的组件组成：选项卡导航（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>

Bootstrap选项卡显示但在点击之前不会突出显示

1 个答案: