選項卡

　　選項卡的基本使用方式為：

<ul class="nav nav-tabs"> <li class="active"><a href="#" data-target="#tab1" data-toggle="tab">tab1</a></li> <li><a href="#" data-target="#tab2" data-toggle="tab">tab2</a></li> <li><a href="#" data-target="#tab3" data-toggle="tab">tab3</a></li></ul><div class="tab-content"> <div class="tab-pane active" id="tab1">11111</div> <div class="tab-pane" id="tab2">22222</div> <div class="tab-pane" id="tab3">33333</div></div>

　　選項卡使用分別標簽和具體內容，這兩個可以不放在一起但是一定要同時存在。

　　選項卡標簽的關鍵屬性為data-target="ele",data-toggle="tab",data-target="ele"表示該標簽對應的具體內容，data-toggle="tab"提供了HTML觸發條件，這兩個屬性就可以完成選項卡的標簽功能，但是如果不按照上面的嵌套結構直接使用這兩個屬性的話，會缺少高亮樣式需要我們自己實現。

　　具體內容為了避免不必要的問題我們要按照上面的結構進行編寫，tab-pane作為tab-content的內元素才可以進行顯示隱藏，class="tab-pane"元素要和標簽的data-target互相對應，如果data-target設置為data-target="#demo"則內容元素上要設置id="demo"，active表示高亮樣式,標識出當前顯示的標簽。

　　如果需要動畫在tab-pane后面添加fade即可

　　標簽的高亮類樣式要設置在li元素上

JS使用

　　選項卡在使用JS進行調用時直接在標簽元素上綁定事件即可,選項卡只提供了一個現實的參數"show"，可以通過JS來選中某一個標簽，一定是在標簽元素上綁定事件。

使用方式為：

$("ele").tab("show")

　　選項卡提供了兩個事件，事件同樣要綁定在標簽元素上：

　　1.show.bs.tab在tab顯示之前觸發

　　2.shown.bs.tab在tab顯示之后觸發

　　如果沒有在class="tab-pane"上設置動畫，兩個事件其實沒什么區別，如果設置了動畫show.bs.tab在tab顯示以前觸發，shown.bs.tab在動畫完成之后觸發。

　　在這兩個事件的事件對象中提供了兩個屬性分別為e.target和e.relatedTarget,分別為當前點擊的tab以及前一個tab。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。