快捷導(dǎo)航

基于BootStrap環(huán)境寫jQuery tabs插件

更新時(shí)間：2016年07月12日 10:00:52 作者：鄉(xiāng)間小路

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

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

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

首先是HTML部分，HTML部分按照結(jié)構(gòu)簡(jiǎn)約，突出干貨的思路來(lái)設(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)&nbsp;<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)&nbsp;<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)&nbsp;<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ì)列出該類型的圖書。

下面來(lái)看看樣式表部分，看看如何美化選項(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;//無(wú)下劃線
}
//選項(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)然大家也可以修改它來(lái)設(shè)計(jì)出更美的樣式。而當(dāng)選項(xiàng)卡點(diǎn)擊切換的時(shí)候，這部分的交互就要交給Jquery來(lái)完成了，它需要設(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)
})
});
});