Bootstrap Tab 显示但不突出显示直到单击 [英] Bootstrap Tab shows but does not highlight until clicked

问题描述

我正在使用 Twitter Bootstrap (v3.0.3) 标签，它们运行良好，除了……我标记为 active 的标签不会在视觉上突出显示，除非您点击它.

有趣的是我可以使用 jsFiddle 和来自 Twitter Bootstrap 网站的示例代码重现这种行为:

引导程序示例:http://getbootstrap.com/javascript/#tabs
jsFiddle:http://jsfiddle.net/uXV56/

标签代码示例:

<ul class="nav nav-tabs"><li><a href="#home" data-toggle="tab">首页</a></li><li><a href="#profile" data-toggle="tab">Profile</a></li><li><a href="#messages" data-toggle="tab">消息</a></li><li><a href="#settings" data-toggle="tab">设置</a></li><!-- 标签窗格--><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>

在 jsFiddle 中注意 active 选项卡是打开的，但没有在视觉上突出显示.如果您将 active css 类移动到不同的选项卡，并设置某种内容以便区分它们，您将看到 Bootstrap 正在读取该类并默认打开正确的选项卡，它只是没有突出显示...如果您单击任何选项卡，包括当前活动的选项卡，视觉提示会突出显示该选项卡.

解决方案

Bootstrap Tabs 由两个独立的组件组成:tab-navigation (ul.nav.nav-tabs > li > a) 和选项卡内容 (div.tab-content > div.tab-pane).

您必须激活这两个组件才能使其工作，因为 div.tab-pane.active 用于显示正确的选项卡窗格.菜单中的视觉提示由 li.active > 管理.一个.

因此，将您的示例更改为此，一切正常.

<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">消息</a></li><li><a href="#settings" data-toggle="tab">设置</a></li><!-- 标签窗格--><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>

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.

解决方案

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>

这篇关于Bootstrap Tab 显示但不突出显示直到单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！