## 可切換標簽 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
})
~~~
- 第一章 . bootstrap介紹
- 第二章 . 全局CSS樣式
- 1、總體注意事項
- 2、柵格系統
- 3、排版
- 4、代碼
- 5、表格
- 6、表單
- 7、 按鈕
- 8、 圖片
- 9、輔助類
- 10、響應式工具
- 第三章 . bootstrap相關CSS應用
- 1、CSS媒體查詢 @media
- 2、px,em,rem之間的關系和換算方式
- 第四章 . 組件
- 1、Glyphicons 字體圖標
- 2、下拉菜單
- 3、按鈕組
- 4、按鈕式下拉菜單
- 5、輸入框組
- 6、導航
- 7、導航條
- 8、路徑導航
- 9、分頁
- 10、標簽
- 11、徽章
- 12、巨幕
- 13、頁頭
- 14、縮略圖
- 15、警告框
- 16、進度條
- 17、媒體對象
- 18、列表組
- 19、面版
- 20、Well
- 第五章 . JavaScript 插件
- 1、JavaScript 插件引入前提
- 2、過渡效果 (transition.js)
- 3、模態框 (modal.js)
- 4、下拉菜單 (dropdown.js)
- 5、滾動監聽 (scrollspy.js)
- 6、可切換標簽 (tab.js)
- 7、工具提示 (tooltip.js)
- 8、彈出框 (popover.js)
- 9、警告信息 (alert.js)
- 10、按鈕 (button.js)
- 11、折疊插件(collapse.js)
- 12、輪播插件(carousel.js)
- 13、Affix插件(affix.js)