Bootstrap JS 选项卡

选项卡 CSS 类

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

有关选项卡的教程，请阅读我们的Bootstrap 选项卡/药丸教程。

Class	Description	Example
`.nav nav-tabs`	Creates navigation tabs	尝试一下
`.nav nav-pills`	Creates navigation pills	尝试一下
`.nav-item`	Creates tab items	尝试一下
`.nav-link`	Styles links inside the navigation tab	尝试一下
`.nav-justified`	Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs are stacked	尝试一下
`.tab-content`	Together with .tab-pane and data-toggle="tab", it makes the tab toggleable	尝试一下
`.tab-pane`	Together with .tab-content and data-toggle="tab", it makes the tab toggleable	尝试一下

通过 data-* 属性

添加data-toggle="tab"到每个选项卡，并添加.tab-pane为每个选项卡提供唯一 ID 的类，并将它们包装在.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');
})

// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')

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

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

// Select fourth tab (zero-based)
$('.nav-tabs li:eq(3) a').tab('show')

亲自试一试 »

选项卡选项

None

选项卡方法

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

Method	Description	尝试一下
.tab("show")	Shows the tab	尝试一下

选项卡事件

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

Event	Description	尝试一下
show.bs.tab	Occurs when the tab is about to be shown.	尝试一下
shown.bs.tab	Occurs when the tab is fully shown (after CSS transitions have completed)	尝试一下
hide.bs.tab	Occurs when the tab is about to be hidden	尝试一下
hidden.bs.tab	Occurs when the tab is fully hidden (after CSS transitions have completed)	尝试一下

提示：使用 jQuery 的事件目标和事件相关目标获取活动选项卡和前一个活动选项卡：

示例

$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text(); // active tab
var y = $(event.relatedTarget).text(); // previous tab
});

亲自试一试 »