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.targetevent.relatedTarget 来获取活动选项卡和上一个活动选项卡:

实例

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