選項(xiàng)卡

選項(xiàng)卡的基本使用方式為：

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

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

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

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

如果需要?jiǎng)赢?huà)在tab-pane后面添加fade即可

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

JS使用

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

使用方式為：

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

選項(xiàng)卡提供了兩個(gè)事件，事件同樣要綁定在標(biāo)簽元素上：

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

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

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

在這兩個(gè)事件的事件對(duì)象中提供了兩個(gè)屬性分別為e.target和e.relatedTarget,分別為當(dāng)前點(diǎn)擊的tab以及前一個(gè)tab。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。