标簽頁（Tab）在 Bootstrap 導航元素 一章中介紹過。通過結合一些 data 屬性，您可以輕松地建立一個标簽頁界面。通過這個插件您可以把内容放置在标簽頁或者是膠囊式标簽頁甚至是下拉菜單标簽頁中。
如果您想要單獨引用該插件的功能，那麼您需要引用 <b>tab.js</b>。或者，正如 Bootstrap 插件概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。
Bootstrap 标簽頁（Tab）插件
您可以通過以下兩種方式啟用标簽頁：
<b>通過 data 屬性</b>：您需要添加 <b>data-toggle="tab"</b> 或 <b>data-toggle="pill"</b> 到錨文本連結中。
添加 <b>nav</b> 和 <b>nav-tabs</b> 類到 <b>ul</b> 中，将會應用 Bootstrap 标簽樣式，添加 <b>nav</b> 和 <b>nav-pills</b> 類到 <b>ul</b> 中，将會應用 Bootstrap 膠囊式樣式。
<b>通過 JavaScript</b>：您可以使用 Javascript 來啟用标簽頁，如下所示：
下面的執行個體示範了以不同的方式來激活各個标簽頁：
如果需要為标簽頁設定淡入淡出效果，請添加 <b>.fade</b> 到每個 <b>.tab-pane</b> 後面。第一個标簽頁必須添加 <b>.in</b> 類，以便淡入顯示初始内容，如下面執行個體所示：
下面的執行個體示範了使用 data 屬性的标簽頁（Tab）插件及其淡入淡出的效果：
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">
菜鳥教程
</a>
</li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java
<b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>菜鳥教程是一個提供最新的web技術站點，本站免費提供了建站相關的技術文檔，幫助廣大web技術愛好者快速入門并建立自己的網站。菜鳥先飛早入行——學的不僅是技術，更是夢想。</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS 是一個由蘋果公司開發和釋出的手機作業系統。最初是于 2007 年首次釋出 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 作業系統是用在蘋果電腦上，iOS 是蘋果的移動版本。</p>
<div class="tab-pane fade" id="jmeter">
<p>jMeter 是一款開源的測試軟體。它是 100% 純 Java 應用程式，用于負載和性能測試。</p>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans（EJB）是一個建立高度可擴充性和強大企業級應用程式的開發架構，部署在相容應用程式伺服器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
結果如下所示：
<b>.$().tab</b>：該方法可以激活标簽頁元素和内容容器。标簽頁需要用一個 <b>data-target</b> 或者一個指向 DOM 中容器節點的 <b>href</b>。
下面的執行個體示範了标簽頁（Tab）插件方法 <b>.tab</b> 的用法。在本執行個體中，第二個标簽頁 iOS 是激活的：
<li class="active"><a href="#home" data-toggle="tab">
菜鳥教程</a>
data-toggle="dropdown">Java <b class="caret"></b>
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">
jmeter</a>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">
ejb</a>
<script>
$(function () {
$('#myTab li:eq(1) a').tab('show');
});
</script>
下表列出了标簽頁（Tab）插件中要用到的事件。這些事件可在函數中當鈎子使用。
事件
描述
執行個體
show.bs.tab
該事件在标簽頁顯示時觸發，但是必須在新标簽頁被顯示之前。分别使用 <b>event.target</b> 和 <b>event.relatedTarget</b> 來定位到激活的标簽頁和前一個激活的标簽頁。
shown.bs.tab
該事件在标簽頁顯示時觸發，但是必須在某個标簽頁已經顯示之後。分别使用 <b>event.target</b> 和 <b>event.relatedTarget</b> 來定位到激活的标簽頁和前一個激活的标簽頁。
下面的執行個體示範了标簽頁（Tab）插件事件的用法。在本執行個體中，将顯示目前和前一個通路過的标簽頁：
<hr>
<p class="active-tab"><strong>激活的标簽頁</strong>：<span></span></p>
<p class="previous-tab"><strong>前一個激活的标簽頁</strong>：<span></span></p>
菜鳥教程</a></li>
data-toggle="dropdown">
Java <b class="caret"></b></a>
$(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// 擷取已激活的标簽頁的名稱
var activeTab = $(e.target).text();
// 擷取前一個激活的标簽頁的名稱
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);