## 可切換標簽 tab.js 一個可切換的標簽導航包含兩部分內容，一個是標簽導航，一個是內容面板。每個標簽都有一個對應的內容面板，當標簽發生切換時，自動切換到相應的內容面板。 ```html <div class="tab-content"> <div class="tab-pane active" id="tab1" role="tabpanel"> <p>第一部分</p> </div> <div class="tab-pane" id="tab2" role="tabpanel"> <p>第二部分</p> </div> <div class="tab-pane" id="tab3" role="tabpanel"> <p>第三部分</p> </div> </div> ``` 其次，定義標簽導航。所有鏈接的 data-toggle 屬性值必須是 "tab"，href 屬性值為對應內容面板的 id ```html <ul class="nav nav-tabs" role="tablist"> <li class="active" role="presentation"><a href="#tab1" data-toggle="tab" role="tab">part 1</a></li> <li role="presentation"><a href="#tab2" data-toggle="tab" role="tab">part 2</a></li> <li role="presentation"><a href="#tab3" data-toggle="tab" role="tab">part 3</a></li> </ul> ``` 最后，為了兼容IE早期版本，使整個標簽導航具有可布局性，防止布局發生環繞和錯位現象，Bootstrap還將標簽導航和內容面板統統放在一個 .tabbable 容器中。 ```html <div class="tabbable">...</div> ``` 可切換完整代碼如下： ```html <div class="tabbable"> <ul class="nav nav-tabs" role="tablist"> <li class="active" role="presentation"><a href="#tab1" data-toggle="tab" role="tab">part 1</a></li> <li role="presentation"><a href="#tab2" data-toggle="tab" role="tab">part 2</a> </li> <li role="presentation"><a href="#tab3" data-toggle="tab" role="tab">part 3</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1" role="tabpanel"> <p>第一部分</p> </div> <div class="tab-pane" id="tab2" role="tabpanel"> <p>第二部分</p> </div> <div class="tab-pane" id="tab3" role="tabpanel"> <p>第三部分</p> </div> </div> </div> ``` 靜態效果如下（實際效果需要復制代碼在瀏覽器中查看）：  **1.** 通過 data 屬性調用 只需在元素上指定data-toggle=“tab”或data-toggle=“pill”，就可以激活選項卡或膠囊式標簽頁，而無需編寫任何JavaScript。將nav和nav tabs類添加到tabul將應用引導選項卡樣式，而添加nav和nav pills類將應用pill樣式。具體用法參照以上代碼。 **2.** 通過 JavaScript 調用 通過JavaScript啟用選項卡（每個選項卡需要單獨激活）,代碼如下： ~~~js $('.tabbable a').click(function (e) { e.preventDefault() $(this).tab('show') }) ~~~ ***** **選項卡淡入淡出** 要使選項卡淡入，請在每個.tab-pane窗格中添加.fade。第一個選項卡窗格還必須具有.in才能使初始內容可見。 ```html <div class="tab-content"> <div class="tab-pane fade in active" id="tab1" role="tabpanel"> <p>第一部分</p> </div> <div class="tab-pane fade" id="tab2" role="tabpanel"> <p>第二部分</p> </div> <div class="tab-pane fade" id="tab3" role="tabpanel"> <p>第三部分</p> </div> </div> ``` ***** **方法** $（）.tab 激活選項卡元素和內容容器。Tab應該有一個針對DOM中容器節點的數據目標或href。在上面的示例中，選項卡是具有data-toggle=“tab”屬性的\<a\>標簽。 .tab('show') 選擇給定選項卡并顯示其關聯內容。先前選定的任何其他選項卡都將取消選中，并且其關聯內容將隱藏。 ***** **事件** 顯示新選項卡時，事件按以下順序觸發： 1. `hide.bs.tab`(在當前活動選項卡上) 2. `show.bs.tab`(在“待顯示”選項卡上) 3. `hidden.bs.tab`(在上一個活動選項卡上，與`hide.bs.tab`事件) 4. `shown.bs.tab`(在剛剛顯示的新活動選項卡上，與`show.bs.tab`事件 如果沒有選項卡已處于活動狀態，則 hide.bs.tab 以及 hidden.bs.tab 不會觸發事件。 | 事件類型| 事件描述 | | --- | --- | | show.bs.tab | 此事件在選項卡顯示時激發，但在顯示新選項卡之前。使用`event.target`以及`event.relatedTarget`分別針對活動選項卡和上一個活動選項卡（如果可用） | | shown.bs.tab | 此事件在選項卡顯示后在tab show上激發。使用`event.target`以及`event.relatedTarget`分別針對活動選項卡和上一個活動選項卡（如果可用）。| | hide.bs.tab | 此事件在要顯示新選項卡時激發（因此前一個活動選項卡將被隱藏）。使用`event.target`以及`event.relatedTarget`分別針對當前的活動選項卡和即將啟用的新選項卡。 | | hidden.bs.tab | 此事件在顯示新選項卡后激發（因此前一個活動選項卡被隱藏）。使用`event.target`以及`event.relatedTarget`分別針對上一個活動選項卡和新活動選項卡。| ~~~js $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // newly activated tab e.relatedTarget // previous active tab }) ~~~