Bootstrap JS 选项卡
JS 选项卡 (tab.js)
选项卡用于将内容分成不同的窗格，每个窗格一次只能查看一个。
有关选项卡的教程，请阅读我们的 Bootstrap 选项卡/药丸教程。
选项卡插件类
| 类 | 描述 | 示例 |
|---|---|---|
| .nav nav-tabs | 创建导航选项卡 | 试试看 |
| .nav-justified | 使导航选项卡/药丸在屏幕宽度大于 768px 时与父级宽度相等。在较小的屏幕上，导航选项卡会堆叠起来 | 试试看 |
| .tab-content | 与 .tab-pane 和 data-toggle="tab" 一起，它使选项卡可切换 | 试试看 |
| .tab-pane | 与 .tab-content 和 data-toggle="tab" 一起，它使选项卡可切换 | 试试看 |
通过 data-* 属性
为每个选项卡添加 data-toggle="tab"，并为每个选项卡添加一个具有唯一 ID 的 .tab-pane 类，并将它们包装在一个 .tab-content 类中。
示例
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">首页</a></li>
<li><a data-toggle="tab" href="#menu1">菜单 1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>首页</h3>
<p>一些内容。</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>菜单 1</h3>
<p>菜单 1 中的一些内容。</p>
</div>
</div>
亲自试一试 »
通过 JavaScript
使用以下方法手动启用
示例
// 选择所有选项卡
$('.nav-tabs a').click(function(){
$(this).tab('show');
})
// 按名称选择选项卡
$('.nav-tabs a[href="#home"]').tab('show')
// 选择第一个选项卡
$('.nav-tabs a:first').tab('show')
// 选择最后一个选项卡
$('.nav-tabs a:last').tab('show')
// 选择第四个选项卡（从零开始）
$('.nav-tabs li:eq(3) a').tab('show')
亲自试一试 »
选项卡选项
| 无 |
选项卡方法
下表列出了所有可用的选项卡方法。
| 方法 | 描述 | 试试看 |
|---|---|---|
| .tab("show") | 显示选项卡 | 试试看 |
选项卡事件
下表列出了所有可用的选项卡事件。
| 事件 | 描述 | 试试看 |
|---|---|---|
| show.bs.tab | 当选项卡即将显示时发生。 | 试试看 |
| shown.bs.tab | 当选项卡完全显示时发生（在 CSS 过渡完成后） | 试试看 |
| hide.bs.tab | 当选项卡即将隐藏时发生 | 试试看 |
| hidden.bs.tab | 当选项卡完全隐藏时发生（在 CSS 过渡完成后） | 试试看 |
提示：使用 jQuery 的 event.target 和 event.relatedTarget 来获取活动选项卡和上一个活动选项卡
示例
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text(); // 活动选项卡
var y = $(event.relatedTarget).text(); // 上一个选项卡
});
亲自试一试 »
