Bootstrap JS 选项卡参考

JS 选项卡 (tab.js)

选项卡用于将内容分隔到不同的窗格中,其中每个窗格一次可查看一个。

有关选项卡的教程,请阅读我们的 Bootstrap 选项卡/胶囊教程


Tab 选项卡插件类

描述 实例
.nav nav-tabs 创建导航选项卡 测试一下
.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="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 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')

// Select last tab
$('.nav-tabs a:last').tab('show')

// 选择第四个选项卡(从零开始)
$('.nav-tabs li:eq(3) a').tab('show')
亲自试一试 »

Tab 选项卡选项

None

Tab 选项卡方法

下表列出了所有可用的选项卡方法。

方法 描述 试一试
.tab("show") 显示选项卡 测试一下

Tab 选项卡事件

下表列出了所有可用的选项卡事件。

事件 描述 试一试
show.bs.tab 在即将显示选项卡时发生。 测试一下
shown.bs.tab 在选项卡完全显示时发生(在 CSS 转换完成后) 测试一下
hide.bs.tab 当标签即将隐藏时发生 测试一下
hidden.bs.tab 在选项卡完全隐藏时发生(在 CSS 转换完成后) 测试一下

提示: 使用 jQuery 的 event.targetevent.relatedTarget 来获取活动选项卡和上一个活动选项卡:

实例

$('.nav-tabs a').on('shown.bs.tab', function(event){
  var x = $(event.target).text();         // 活动选项卡
  var y = $(event.relatedTarget).text();  // 上一个选项卡
});
亲自试一试 »