Bootstrap 可切换的标签导航

标签间的切换，需要 bootstrap-tab.js 文件支持，因此，要实现可切换的标签导航，首先需要导入 jQuery 库和 bootstrap-tab.js 插件：

1. <script src="assets/js/jquery.js"></script>
2. <script src="assets/js/bootstrap-tab.js"></script>

一个可切换的标签导航包含两部分内容，一个是标签导航，一个是内容面板。每个标签都有一个对应的内容面板，当标签发生切换时，自动切换到相应的内容面板。

首先，定义内容面板。一个内容面板是一个带有唯一 id 的 .tab-pane 容器，跟标签页一一对应，并要将所有的内容面板都放在一个 .tab-content 的容器中。

1. <div class="tab-content">
2.   <div class="tab-pane active " id="tab1">
3.     <p>I'm in Section 1.</p>
4.   </div>
5.   ...
6. </div>

其次，定义标签导航。所有链接的 data-toggle 属性值必须是 "tab"，href 属性值为对应内容面板的 id。

1. <ul class="nav nav-tabs">
2.   <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
3.   <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
4.   <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
5. </ul>

最后，为了兼容IE早期版本，使整个标签导航具有可布局性，防止布局发生环绕和错位现象，Bootstrap还将标签导航和内容面板统统放在一个 .tabbable 容器中。

1. <div class="tabbable"> 
2.   ...
3. </div>

完整代码如下：

1. <div class="tabbable">
2.   <ul class="nav nav-tabs">
3.     <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
4.     <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
5.     <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
6.   </ul>
7.   <div class="tab-content">
8.     <div class="tab-pane active " id="tab1">
9.       <p>I'm in Section 1.</p>
10.     </div>
11.     <div class="tab-pane" id="tab2">
12.       <p>Howdy, I'm in Section 2.</p>
13.     </div>
14.     <div class="tab-pane" id="tab3">
15.       <p>What up girl, this is Section 3.</p>
16.     </div>
17.   </div>
18. </div>

效果如图 4‑25所示：

图4-25 Bootstrap可切换的标签导航

现在，就可以在标签之间自由切换了，但它是硬切换。如果希望标签具有淡入效果，只需为所有的 .tab-pane 容器额外添加一个 .fade 类即可。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。