5.5.2　JavaScript用法

如果不使用HTML声明式绑定（即声明data-toggle），选项卡组件也是支持JavaScript代码直接初始化的。代码示例如下：

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

使用JavaScript代码的效果与在nav里面的a链接上设置data-toggle="tab"属性是一样的，最终效果都是查询所单击的元素（a元素），然后查找其data-target（或者href）所对应的选择符，然后显示该选择符对应的面板（并隐藏其他面板）。

所以根据上述原理，如果要对单个的选项卡进行调用的话，也是可以的。对单个选项卡调用的方法有如下几种：

$('.nav a[href="#profile"]').tab('show')   // 通过元素名称查询
$('.nav a:first').tab('show')                   // 查询第一个tab
$('.nav a:last').tab('show')                    // 查询最后一个tab
$('.nav li:eq(2) a').tab('show')                // 查询第3个tab（索引从0开始）

选项卡组件目前只支持两种类型的事件订阅，分别对应下拉菜单的弹出前、弹出后。解释如表5-8所示。

事件的调用方式也很简单，但需要注意，一个事件e的两个属性分别代表两个不同的tab对象。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    e.target                                    // 当前单击的tab
    e.relatedTarget                             // 前一个tab
})