快捷導航

BootStrap tab選項卡使用小結(jié)

更新時間：2020年08月09日 09:37:25 作者：y丶卿

這篇文章主要為大家詳細介紹了BootStrap tab選項卡使用小結(jié)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

選項卡

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

<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>

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

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

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

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

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

JS使用

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

使用方式為：

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

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

　　1.show.bs.tab在tab顯示之前觸發(fā)

　　2.shown.bs.tab在tab顯示之后觸發(fā)

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

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。