摘要：選項(xiàng)卡Tabs是Web中一種非常常用的功能。用戶點(diǎn)擊或懸浮對(duì)應(yīng)的菜單項(xiàng)，能切換出對(duì)應(yīng)的內(nèi)容Bootstrap框架中的選項(xiàng)卡主要有兩部分內(nèi)容組成： 選項(xiàng)卡組件（也就是菜單組件），對(duì)應(yīng)的是 Bootstrap的 nav-tabs） 底部可以切換的選項(xiàng)卡面板，在 Bootstrap 中通常 tab-pane 來(lái)表示.<!-- 選項(xiàng)卡組件（菜單項(xiàng)nav-tabs）--&

選項(xiàng)卡Tabs是Web中一種非常常用的功能。用戶點(diǎn)擊或懸浮對(duì)應(yīng)的菜單項(xiàng)，能切換出對(duì)應(yīng)的內(nèi)容

Bootstrap框架中的選項(xiàng)卡主要有兩部分內(nèi)容組成： 

選項(xiàng)卡組件（也就是菜單組件），對(duì)應(yīng)的是 Bootstrap的 nav-tabs） 
底部可以切換的選項(xiàng)卡面板，在 Bootstrap 中通常 tab-pane 來(lái)表示.

<!-- 選項(xiàng)卡組件（菜單項(xiàng)nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
 <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
 <li><a href="#rule" role="tab" data-toggle="tab">規(guī)則</a></li>
 <li><a href="#forum" role="tab" data-toggle="tab">論壇</a></li>
 <li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
 <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
 
<!-- 選項(xiàng)卡面板 -->
<div id="myTabContent" class="tab-content">
 <div class="tab-pane active" id="bulletin">公告內(nèi)容面板</div>
 <div class="tab-pane" id="rule">規(guī)則內(nèi)容面板</div>
 <div class="tab-pane" id="forum">論壇內(nèi)容面板</div>
 <div class="tab-pane" id="security">安全內(nèi)容面板</div>
 <div class="tab-pane" id="welfare">公益內(nèi)容面板</div>
</div>
 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

選項(xiàng)卡–選項(xiàng)卡的結(jié)構(gòu) 

一個(gè)選項(xiàng)卡主要包括兩個(gè)部分，其一是菜單項(xiàng)，其二是內(nèi)容面板。 
關(guān)鍵一點(diǎn)，選項(xiàng)卡中鏈接的錨點(diǎn)要與對(duì)應(yīng)的面板內(nèi)容容器的ID相匹配。 

對(duì)于面板內(nèi)容tab-pane都是隱藏的，只有當(dāng)前面板內(nèi)容才是顯示的：

css源碼：

.tab-content > .tab-pane {
 display: none;
}
.tab-content > .active {
 display: block;
}

選項(xiàng)卡–觸發(fā)切換效果 

選項(xiàng)卡也定義data屬性來(lái)觸發(fā)切換效果。當(dāng)然前提你也要先加載bootstrap.js或者是tab.js。聲明式觸發(fā)選項(xiàng)卡需要滿足以下幾點(diǎn)要求： 
1、選項(xiàng)卡導(dǎo)航鏈接中要設(shè)置 data-toggle=”tab” 
2、并且設(shè)置 data-target=”對(duì)應(yīng)內(nèi)容面板的選擇符(一般是ID)”; 
如果是鏈接的話，還可以通過(guò) href=”對(duì)應(yīng)內(nèi)容面板的選擇符(一般是ID)” 
主要起的作用是用戶點(diǎn)擊的時(shí)候能找到該選擇符所對(duì)應(yīng)的面板內(nèi)容 tab-pane。

3、面板內(nèi)容統(tǒng)一放在 tab-content 容器中，而且每個(gè)內(nèi)容面板 tab-pane 都需要設(shè)置一個(gè)獨(dú)立的選擇符（最好是ID）與選項(xiàng)卡中的 data-target 或 href 的值匹配。

選項(xiàng)卡–為選擇卡添加fade樣式 

為了讓面板的隱藏與顯示在切換的過(guò)程效果更流暢，可以在面板中添加類(lèi)名 fade，讓其產(chǎn)生漸入的效果。 
在添加 fade 樣式時(shí)，最初的默認(rèn)顯示的內(nèi)容面板一定要記得加上 in 類(lèi)名，不然其內(nèi)容用戶無(wú)法看到

<!-- 選項(xiàng)卡組件（菜單項(xiàng)nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
 <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
 <li><a href="#rule" role="tab" data-toggle="tab">規(guī)則</a></li>
 <li><a href="#forum" role="tab" data-toggle="tab">論壇</a></li>
 <li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
 <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 選項(xiàng)卡面板 -->
<div id="myTabContent" class="tab-content">
 <div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div>
 <div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div>
 <div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div>
 <div class="tab-pane fade" id="security">安全內(nèi)容面板</div>
 <div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

選項(xiàng)卡–膠囊式選項(xiàng)卡（nav-pills） 

在Bootstrap除了可以讓 nav-tabs 具有選項(xiàng)卡的切換功能之外，還可以對(duì)膠囊式 nav-pills 導(dǎo)航也具有選項(xiàng)卡的功能。我們只需要將 nav-tabs 換成 nav-pills，另外關(guān)鍵一點(diǎn)是將 data-toggle=”tab”換成data-toggle=”pill”。

<!-- 選項(xiàng)卡組件（菜單項(xiàng)nav-pills）-->
<ul id="myTab" class="nav nav-pills" role="tablist">
 <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>
 <li><a href="#rule" role="tab" data-toggle="pill">規(guī)則</a></li>
 <li><a href="#forum" role="tab" data-toggle="pill">論壇</a></li>
 <li><a href="#security" role="tab" data-toggle="pill">安全</a></li>
 <li><a href="#welfare" role="tab" data-toggle="pill">公益</a></li>
</ul>
<!-- 選項(xiàng)卡面板 -->
<div id="myTabContent" class="tab-content">
 <div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div>
 <div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div>
 <div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div>
 <div class="tab-pane fade" id="security">安全內(nèi)容面板</div>
 <div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div>
</div>

選項(xiàng)卡–JavaScript觸發(fā)方法 

在每個(gè)鏈接的單擊事件中調(diào)用tab(“show”)方法，顯示對(duì)應(yīng)的標(biāo)簽面板內(nèi)容。針對(duì)上面的示例，刪除HTML中自定義的 data-toggle=”tab” 或 data-toggle=”pill” 的屬性，然后通過(guò)下面的腳本來(lái)調(diào)用：

$(function(){
 $("#myTab a").click(function(e){
  e.preventDefault();
  $(this).tab("show");
 });
})

實(shí)例 ：

<!-- 選項(xiàng)卡組件（菜單項(xiàng)nav-tabs）-->
<ul id="myTab2" class="nav nav-tabs" role="tablist">
 <li><a href="#a" role="tab">娛樂(lè)</a></li>
 <li><a href="#b" role="tab">房產(chǎn)</a></li>
 <li><a href="#c" role="tab">國(guó)內(nèi)</a></li>
 <li><a href="#d" role="tab">國(guó)外</a></li>
</ul>
<!-- 選項(xiàng)卡面板 -->
<div id="myTabContent2" class="tab-content">
 <div class="tab-pane fade in active" id="a">娛樂(lè)內(nèi)容面板</div>
 <div class="tab-pane fade" id="b">房產(chǎn)內(nèi)容面板</div>
 <div class="tab-pane fade" id="c">國(guó)內(nèi)內(nèi)容面板</div>
 <div class="tab-pane fade" id="d">國(guó)外內(nèi)容面板</div>
</div>
 
<script>
 $(function(){
 $("#myTab2 a").click(function(e){
  e.preventDefault();
  $(this).tab("show");
 });
})
</script>

  更多關(guān)于bootstrap選項(xiàng)卡使用方法解析請(qǐng)關(guān)注PHP中文網(wǎng)（ipnx.cn）其他文章！