Bootstrap JS 标签
标签 CSS 类
标签用于将内容分成不同的窗格，每个窗格一次只能查看一个。
有关标签的教程，请阅读我们的 Bootstrap 标签/药丸教程。
| 类 | 描述 | 示例 |
|---|---|---|
.nav nav-tabs |
创建导航标签 | 试试 |
.nav nav-pills |
创建导航药丸 | 试试 |
.nav-item |
创建标签项 | 试试 |
.nav-link |
为导航标签内的链接设置样式 | 试试 |
.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="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">主页</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">菜单 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">菜单 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
手动启用
示例
// 选择所有标签
$('.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(); // 上一个标签
});
亲自尝试 »
