Bootstrap JS 選項卡
JS 選項卡 (tab.js)
選項卡用於將內容分成不同的窗格，每次只能檢視一個窗格。
要了解關於選項卡的教程，請閱讀我們的 Bootstrap 選項卡/膠囊教程。
選項卡外掛類
| 類 | 描述 | 示例 |
|---|---|---|
| .nav nav-tabs | 建立導航標籤頁 | 試一試 |
| .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 類中。
示例
<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>一些內容。</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>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')
// 選擇最後一個選項卡
$('.nav-tabs a:last').tab('show')
// 選擇第四個選項卡（從零開始）
$('.nav-tabs li:eq(3) a').tab('show')
自己動手試一試 »
選項卡選項
| 無 |
選項卡方法
下表列出了所有可用的選項卡方法。
| 方法 | 描述 | 試一試 |
|---|---|---|
| .tab("show") | 顯示選項卡 | 試一試 |
選項卡事件
下表列出了所有可用的選項卡事件。
| 事件 | 描述 | 試一試 |
|---|---|---|
| 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(); // 上一個選項卡
});
自己動手試一試 »
