## 可切换标签 tab.js 一个可切换的标签导航包含两部分内容，一个是标签导航，一个是内容面板。每个标签都有一个对应的内容面板，当标签发生切换时，自动切换到相应的内容面板。 ```html <div class="tab-content"> <div class="tab-pane active" id="tab1" role="tabpanel"> <p>第一部分</p> </div> <div class="tab-pane" id="tab2" role="tabpanel"> <p>第二部分</p> </div> <div class="tab-pane" id="tab3" role="tabpanel"> <p>第三部分</p> </div> </div> ``` 其次，定义标签导航。所有链接的 data-toggle 属性值必须是 "tab"，href 属性值为对应内容面板的 id ```html <ul class="nav nav-tabs" role="tablist"> <li class="active" role="presentation"><a href="#tab1" data-toggle="tab" role="tab">part 1</a></li> <li role="presentation"><a href="#tab2" data-toggle="tab" role="tab">part 2</a></li> <li role="presentation"><a href="#tab3" data-toggle="tab" role="tab">part 3</a></li> </ul> ``` 最后，为了兼容IE早期版本，使整个标签导航具有可布局性，防止布局发生环绕和错位现象，Bootstrap还将标签导航和内容面板统统放在一个 .tabbable 容器中。 ```html <div class="tabbable">...</div> ``` 可切换完整代码如下： ```html <div class="tabbable"> <ul class="nav nav-tabs" role="tablist"> <li class="active" role="presentation"><a href="#tab1" data-toggle="tab" role="tab">part 1</a></li> <li role="presentation"><a href="#tab2" data-toggle="tab" role="tab">part 2</a> </li> <li role="presentation"><a href="#tab3" data-toggle="tab" role="tab">part 3</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1" role="tabpanel"> <p>第一部分</p> </div> <div class="tab-pane" id="tab2" role="tabpanel"> <p>第二部分</p> </div> <div class="tab-pane" id="tab3" role="tabpanel"> <p>第三部分</p> </div> </div> </div> ``` 静态效果如下（实际效果需要复制代码在浏览器中查看）：  **1.** 通过 data 属性调用 只需在元素上指定data-toggle=“tab”或data-toggle=“pill”，就可以激活选项卡或胶囊式标签页，而无需编写任何JavaScript。将nav和nav tabs类添加到tabul将应用引导选项卡样式，而添加nav和nav pills类将应用pill样式。具体用法参照以上代码。 **2.** 通过 JavaScript 调用 通过JavaScript启用选项卡（每个选项卡需要单独激活）,代码如下： ~~~js $('.tabbable a').click(function (e) { e.preventDefault() $(this).tab('show') }) ~~~ ***** **选项卡淡入淡出** 要使选项卡淡入，请在每个.tab-pane窗格中添加.fade。第一个选项卡窗格还必须具有.in才能使初始内容可见。 ```html <div class="tab-content"> <div class="tab-pane fade in active" id="tab1" role="tabpanel"> <p>第一部分</p> </div> <div class="tab-pane fade" id="tab2" role="tabpanel"> <p>第二部分</p> </div> <div class="tab-pane fade" id="tab3" role="tabpanel"> <p>第三部分</p> </div> </div> ``` ***** **方法** $（）.tab 激活选项卡元素和内容容器。Tab应该有一个针对DOM中容器节点的数据目标或href。在上面的示例中，选项卡是具有data-toggle=“tab”属性的\<a\>标签。 .tab('show') 选择给定选项卡并显示其关联内容。先前选定的任何其他选项卡都将取消选中，并且其关联内容将隐藏。 ***** **事件** 显示新选项卡时，事件按以下顺序触发： 1. `hide.bs.tab`(在当前活动选项卡上) 2. `show.bs.tab`(在“待显示”选项卡上) 3. `hidden.bs.tab`(在上一个活动选项卡上，与`hide.bs.tab`事件) 4. `shown.bs.tab`(在刚刚显示的新活动选项卡上，与`show.bs.tab`事件 如果没有选项卡已处于活动状态，则 hide.bs.tab 以及 hidden.bs.tab 不会触发事件。 | 事件类型| 事件描述 | | --- | --- | | show.bs.tab | 此事件在选项卡显示时激发，但在显示新选项卡之前。使用`event.target`以及`event.relatedTarget`分别针对活动选项卡和上一个活动选项卡（如果可用） | | shown.bs.tab | 此事件在选项卡显示后在tab show上激发。使用`event.target`以及`event.relatedTarget`分别针对活动选项卡和上一个活动选项卡（如果可用）。| | hide.bs.tab | 此事件在要显示新选项卡时激发（因此前一个活动选项卡将被隐藏）。使用`event.target`以及`event.relatedTarget`分别针对当前的活动选项卡和即将启用的新选项卡。 | | hidden.bs.tab | 此事件在显示新选项卡后激发（因此前一个活动选项卡被隐藏）。使用`event.target`以及`event.relatedTarget`分别针对上一个活动选项卡和新活动选项卡。| ~~~js $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // newly activated tab e.relatedTarget // previous active tab }) ~~~