這篇文章主要介紹了基于BootStrap環(huán)境寫jQuery tabs插件的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

一直想改版網(wǎng)站首頁的圖書展示部分，以前的展示是使用BootStrap的傳統(tǒng)的collapse,網(wǎng)頁篇幅占用大，也不夠美觀，操作也來說比較麻煩。于是有了自己利用Jquery來做一個(gè)圖書展示的tabs的想法，之前也在網(wǎng)上找了半天，并不是很滿意。

下面來看看我的實(shí)現(xiàn)過程：

首先是HTML部分，HTML部分按照結(jié)構(gòu)簡(jiǎn)約，突出干貨的思路來設(shè)計(jì)。選項(xiàng)卡使用了列表，在列表中插入了超鏈接，當(dāng)然這里的超鏈接只是作為按鈕使用的，當(dāng)點(diǎn)擊任何一個(gè)鏈接，就切換到對(duì)應(yīng)的選項(xiàng)卡。選項(xiàng)卡的內(nèi)容部分直接使用DIV，將圖書的展示一本一本的排列在div中，下面看看具體代碼：

<div class="col-md-8" id="indexbooks">

<!-- 選項(xiàng)卡部分 -->

<h4 class="title" style="padding-bottom:10px;">

圖 書 

<ul id="booksfilter" style="float:right;font-size:14px;"> 

<li><a class="cur" href="javascript:void(0);">入門</a><span>|</span></li>

<li><a href="javascript:void(0);">實(shí)戰(zhàn)</a><span>|</span></li>

<li><a href="javascript:void(0);">進(jìn)階</a><span>|</span></li>

</ul>

</h4>

<div class="row">

<div class="booklist">

<!-- 入門級(jí)圖書展示 -->

<div class="col-md-3">

<div class="thumbnail" style="height:220px; border-width:0px;">

<a href="/book/577e11aa2f33c" target="_blank">

<img style="height:130px;" src="http://img3.doubanio.com/mpic/s1039608.jpg"> </a>

<div class="caption">

<h5 style="text-align:center;">

<a href="/book/577e11aa2f33c" target="_blank">

LINUX權(quán)威指南（... </a></h5>

<p style="text-align:center;">

評(píng)論(0) <span class="badge">1推薦</span></p>

</div>

</div>

</div>

<!-- 其他入門圖書（循環(huán)打?。?-->

</div>

<div class="booklist">

<!-- 實(shí)戰(zhàn)型圖書展示 -->

<div class="col-md-3">

<div class="thumbnail" style="height:220px; border-width:0px;">

<a href="/book/577e11aa2f33c" target="_blank">

<img style="height:130px;" src="http://img3.doubanio.com/mpic/s1039608.jpg"> </a>

<div class="caption">

<h5 style="text-align:center;">

<a href="/book/577e11aa2f33c" target="_blank">

LINUX權(quán)威指南（... </a></h5>

<p style="text-align:center;">

評(píng)論(0) <span class="badge">1推薦</span></p>

</div>

</div>

</div>

<!-- 其他實(shí)戰(zhàn)型圖書（循環(huán)打?。?-->

</div>

<div class="booklist">

<!-- 進(jìn)階型圖書展示 -->

<div class="col-md-3">

<div class="thumbnail" style="height:220px; border-width:0px;">

<a href="/book/577e11aa2f33c" target="_blank">

<img style="height:130px;" src="http://img3.doubanio.com/mpic/s1039608.jpg"> </a>

<div class="caption">

<h5 style="text-align:center;">

<a href="/book/577e11aa2f33c" target="_blank">

LINUX權(quán)威指南（... </a></h5>

<p style="text-align:center;">

評(píng)論(0) <span class="badge">1推薦</span></p>

</div>

</div>

</div>

<!-- 其他進(jìn)階圖書（循環(huán)打印） -->

</div>

</div>

由代碼可知，該選項(xiàng)卡一共有三個(gè)選項(xiàng)，分為入門、實(shí)戰(zhàn)、進(jìn)階，點(diǎn)擊不同的選項(xiàng)卡，則會(huì)列出該類型的圖書。

下面來看看樣式表部分，看看如何美化選項(xiàng)卡及圖書展示部分的內(nèi)容：

<style>

//選項(xiàng)卡列表樣式

#booksfilter li

{

padding:5px;//內(nèi)邊距 5px

list-style-type:none;

float:left;

padding:0px;

}

//設(shè)置‘|'的左右邊距

#booksfilter span

{

margin-left:5px;

margin-right:5px;

}

//選項(xiàng)卡鏈接的樣式

#booksfilter a

{

padding:5px;//內(nèi)邊距：5px

text-decoration:none;//無下劃線

}

//選項(xiàng)卡被選中或當(dāng)鼠標(biāo)移動(dòng)到選項(xiàng)卡時(shí)的樣式

#booksfilter a.cur,#booksfilter a:hover

{

//背景色

color:white;//前景色

border-radius:5px;//圓角

}

</style>

代碼注釋已經(jīng)很詳細(xì)了，當(dāng)然大家也可以修改它來設(shè)計(jì)出更美的樣式。而當(dāng)選項(xiàng)卡點(diǎn)擊切換的時(shí)候，這部分的交互就要交給Jquery來完成了，它需要設(shè)置當(dāng)前點(diǎn)擊的選項(xiàng)卡內(nèi)容為要顯示的內(nèi)容，而隱藏其他的選項(xiàng)卡，并且設(shè)置當(dāng)前選項(xiàng)卡按鈕為選中，刪除其他選項(xiàng)卡的選中狀態(tài)，下面上代碼：

$(function()

{

$('#booksfilter a').each(function(i)

{

$(this).click(function(){

$(this).addClass('cur');

$(this).parent().siblings().find('a').removeClass('cur');//刪除其他任何選項(xiàng)的cur類

$('.booklist').eq(i).show();//顯示本節(jié)點(diǎn)

$('.booklist').eq(i).siblings().hide();//隱藏兄弟節(jié)點(diǎn)

})

});

});

以上所述是小編給大家介紹的基于BootStrap環(huán)境寫的jQuery tabs插件，希望對(duì)大家有所幫助