淺析Bootstrap中Tab（標籤頁）的使用方法

Bootstrap 導航元素使用相同的標記和基類，改變修飾的class，可以在不同的樣式間進行切換
如".nav-pills"（膠囊式導航）與 “.nav-tabs” （標籤式導航）

建立一個標籤式的導航選單：

以一個帶有class .nav 的無序列表開始。
新增 class .nav-tabs。
下面的例項演示了這點：

<!-- 導航區 -->

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
 
<!-- 皮膚區 -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">...</div>
  <div role="tabpanel" class="tab-pane" id="profile">...</div>
  <div role="tabpanel" class="tab-pane" id="messages">...</div>
  <div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>

結果如下顯示：

建立一個膠囊式的導航選單：

如果需要把標籤改成膠囊的樣式，只需要使用".nav-pills"

代替".nav-tabs"即可，其他的步驟與上面相同。

結果如下所示：

標籤頁用法

標籤頁元件分為兩部分，導航區與皮膚區。導航區用於繫結點選事件，切換對應的皮膚。
導航區為一個<ul>列表，要求<ul>帶"nav nav-tabs“或”nav nav-pills"這兩種類名。<li>下的標籤要求有data-toggle="tab"屬性，你可以通過data-target或href指定對應的皮膚。

皮膚區容器要求帶"tab-content“類名，下面的每個皮膚都要求帶”tab-pane"類名。

• 通過 data 屬性：

新增 data-toggle="tab"或 data-toggle="pill"到導航區ul中來啟用標籤頁。

新增 nav 和nav-tabs類到導航區ul中，將會應用 Bootstrap標籤樣式，新增nav 和 nav-pills類到導航區ul中，將會應用Bootstrap膠囊式樣式。

這樣你直接引入 bootstrap.js 就能用了，但你必須為當中某個標籤頁的<li>元素指定"active"類名(active：啟用當前物件)

<!-- 導航區 -->  
 
  <ul class="nav nav-tabs" role="tablist">  
 
  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>    <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>   <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
 
</ul>   
 
<!-- 皮膚區 --> 
 
 
<div class="tab-content">    <div role="tabpanel" class="tab-pane active" id="home">...</div>  
 
  <div role="tabpanel" class="tab-pane" id="profile">...</div>  
 
  <div role="tabpanel" class="tab-pane" id="messages">...</div>  
 
  <div role="tabpanel" class="tab-pane" id="settings">...</div> 
 
</div>  

• 通過 JavaScript：

也可以使用 Javscript 來啟用標籤頁，如下所示：

       $(function () {
        $('#myTab a:last').tab('show');//初始化顯示哪個tab
      
        $('#myTab a').click(function (e) {
          e.preventDefault();//阻止a連結的跳轉行為
          $(this).tab('show');//顯示當前選中的連結及關聯的content
        })
      })

注：

如果你想用JavaScript明確指定哪個皮膚被啟用，你要對它的某個標籤頁的連結使用tab("show")方法，而不是作用於它的容器上。並且如果使用javascript實現這種導航內容的切換，a標籤中無須再新增data-toggle='tab'，當然，如果每個a連結都使用了此屬性，那完全沒有必要在用js來實現了

下面的例項演示了以不同的方式來啟用各個標籤頁：

// 通過名稱選取標籤頁
 
      $('#myTab a[href="#profile"]').tab('show')  
 
// 選取第一個標籤頁  
 
      $('#myTab a:first').tab('show')   
 
      // 選取最後一個標籤頁  
 
      $('#myTab a:last').tab('show')    
 
// 選取第三個標籤頁（從 0 開始索引）  
 
      $('#myTab li:eq(2) a').tab('show')

實現原理

1、單擊一個元素時，首先將原來高亮的元素取消
2、然後給被單擊元素進行高亮
3、如果單擊元素是下拉框中某個選項，則選中本身，還要選中下拉框
4、如果定義了動畫，先執行動畫，然後回撥