淺析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')