Bootstrap JS 选项卡
选项卡 CSS 类
选项卡用于将内容分隔到不同的窗格中，其中每个窗格一次可查看一个。
关选项卡的教程，请阅读我们的 Bootstrap 选项卡/模态教程。
| 类 | 描述 | 例子 |
|---|---|---|
.nav nav-tabs |
创建导航选项卡 | |
.nav nav-pills |
创建导航模态 | |
.nav-item |
创建选项卡项 | |
.nav-link |
导航选项卡内的样式链接 | |
.nav-justified |
在屏幕宽于 768 像素时，使导航选项卡/模态的宽度与其父级相同。在较小的屏幕上，导航选项卡是堆叠的 | |
.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="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- 选项卡窗格 -->
<div class="tab-content">
<div class="tab-pane active container" id="home">...</div>
<div class="tab-pane container" id="menu1">...</div>
<div class="tab-pane container" id="menu2">...</div>
</div>
通过 JavaScript
手动启用:
实例
// Select all tabs
$('.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')
选项卡选项
| None |
选项卡方法
下表列出了所有可用的选项卡方法。
| 方法 | 描述 | 试一试 |
|---|---|---|
| .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(); // 上一个选项卡
});