Tab选项卡 CSS 类
选项卡用于将内容分为不同的窗格，每个窗格一次可见。
下表总结了 Bootstrap Tab选项卡 CSS 类：
| 类名 | 描述 | 示例 |
|---|---|---|
| .nav nav-tabs | 创建导航选项卡 | 尝试一下 |
| .nav nav-pills | 创建一个药丸菜单 | 尝试一下 |
| .nav-justified | 对齐宽度相等的标签/药丸链接 | 尝试一下 |
| .nav-link | 用于在导航栏中设置链接/锚的样式 | 尝试一下 |
| .nav-item | 用于为导航栏中的列表项设置样式 | 尝试一下 |
| .tab-content | 与.tab-pane一起使用以创建可切换tab选项卡 | 尝试一下 |
| .tab-pane | 与.tab-content一起使用以创建可切换tab项 | 尝试一下 |
Tab选项卡方法
下表列出了所有可用的Tab选项卡方法。
| 方法 | 描述 | 示例 |
|---|---|---|
| .tab("show") | 显示tab 选项卡 | 尝试一下 |
Tab选项卡事件
下表列出了所有可用的Tab选项卡事件。
| 事件 | 描述 | 示例 |
|---|---|---|
| show.bs.tab | 在即将显示tab选项卡时发生 | 尝试一下 |
| shown.bs.tab | 在完全显示tab选项卡时发生（在CSS转换完成之后） | 尝试一下 |
| hide.bs.tab | 在tab选项卡将被隐藏时发生 | 尝试一下 |
| hidden.bs.tab | 当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();
});