Bootstrap JS Tab
Tab CSS 類
Tabs（選項卡）用於將內容分成不同的窗格，每個窗格一次只能檢視一個。
有關 Tabs 的教程，請閱讀我們的 Bootstrap Tabs/Pills 教程。
| 類 | 描述 | 示例 |
|---|---|---|
.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 類中。
示例
<!-- Nav tabs -->
<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>
<!-- Tab panes -->
<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 選項
| 無 |
Tab 方法
下表列出了所有可用的 tab 方法。
| 方法 | 描述 | 試一試 |
|---|---|---|
| .tab("show") | 顯示該選項卡 | 試一試 |
Tab 事件
下表列出了所有可用的 tab 事件。
| 事件 | 描述 | 試一試 |
|---|---|---|
| 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(); // 前一個選項卡
});
自己動手試一試 »
