Bootstrap JavaScript插件：可切换标签 (tab.js)

作者:WangMin
格言:努力做好自己喜欢的每一件事

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

<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

<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 容器中。

<div class="tabbable">...</div>

可切换完整代码如下：

<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启用选项卡（每个选项卡需要单独激活）,代码如下：

$('.tabbable a').click(function (e) {
   
   
  e.preventDefault()
  $(this).tab('show')
})

选项卡淡入淡出

要使选项卡淡入，请在每个.tab-pane窗格中添加.fade。第一个选项卡窗格还必须具有.in才能使初始内容可见。

 <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”属性的\标签。

.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 不会触发事件。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
   
   
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

就先分享到这里!! :smile: 后续继续更新!!