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

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

下面來看看我的實現過程：

首先是HTML部分，HTML部分按照結構簡約，突出干貨的思路來設計。選項卡使用了列表，在列表中插入了超鏈接，當然這里的超鏈接只是作為按鈕使用的，當點擊任何一個鏈接，就切換到對應的選項卡。選項卡的內容部分直接使用DIV，將圖書的展示一本一本的排列在div中，下面看看具體代碼：

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

<!-- 選項卡部分 -->

<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);">實戰</a><span>|</span></li>

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

</ul>

</h4>

<div class="row">

<div class="booklist">

<!-- 入門級圖書展示 -->

<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權威指南（... </a></h5>

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

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

</div>

</div>

</div>

<!-- 其他入門圖書（循環打?。?-->

</div>

<div class="booklist">

<!-- 實戰型圖書展示 -->

<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權威指南（... </a></h5>

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

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

</div>

</div>

</div>

<!-- 其他實戰型圖書（循環打印） -->

</div>

<div class="booklist">

<!-- 進階型圖書展示 -->

<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權威指南（... </a></h5>

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

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

</div>

</div>

</div>

<!-- 其他進階圖書（循環打?。?-->

</div>

</div>

由代碼可知，該選項卡一共有三個選項，分為入門、實戰、進階，點擊不同的選項卡，則會列出該類型的圖書。

下面來看看樣式表部分，看看如何美化選項卡及圖書展示部分的內容：

<style>

//選項卡列表樣式

#booksfilter li

{

padding:5px;//內邊距 5px

list-style-type:none;

float:left;

padding:0px;

}

//設置‘|'的左右邊距

#booksfilter span

{

margin-left:5px;

margin-right:5px;

}

//選項卡鏈接的樣式

#booksfilter a

{

padding:5px;//內邊距：5px

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

}

//選項卡被選中或當鼠標移動到選項卡時的樣式

#booksfilter a.cur,#booksfilter a:hover

{

//背景色

color:white;//前景色

border-radius:5px;//圓角

}

</style>

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

$(function()

{

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

{

$(this).click(function(){

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

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

$('.booklist').eq(i).show();//顯示本節點

$('.booklist').eq(i).siblings().hide();//隱藏兄弟節點

})

});

});

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