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

2019-11-20 09:30:31

字體：大中小

供稿：網(wǎng)友

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

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

首先是HTML部分，HTML部分按照結(jié)構(gòu)簡約，突出干貨的思路來設(shè)計。選項卡使用了列表，在列表中插入了超鏈接，當(dāng)然這里的超鏈接只是作為按鈕使用的，當(dāng)點擊任何一個鏈接，就切換到對應(yīng)的選項卡。選項卡的內(nèi)容部分直接使用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);">實戰(zhàn)</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權(quán)威指南（... </a></h5><p style="text-align:center;">評論(0) <span class="badge">1推薦</span></p></div></div></div><!-- 其他入門圖書（循環(huán)打印） --></div><div class="booklist"><!-- 實戰(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;">評論(0) <span class="badge">1推薦</span></p></div></div></div><!-- 其他實戰(zhàn)型圖書（循環(huán)打印） --></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權(quán)威指南（... </a></h5><p style="text-align:center;">評論(0) <span class="badge">1推薦</span></p></div></div></div><!-- 其他進階圖書（循環(huán)打印） --></div></div>

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

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

<style>//選項卡列表樣式#booksfilter li{padding:5px;//內(nèi)邊距 5pxlist-style-type:none;float:left;padding:0px;}//設(shè)置‘|'的左右邊距#booksfilter span{margin-left:5px;margin-right:5px;}//選項卡鏈接的樣式#booksfilter a{padding:5px;//內(nèi)邊距：5pxtext-decoration:none;//無下劃線}//選項卡被選中或當(dāng)鼠標(biāo)移動到選項卡時的樣式#booksfilter a.cur,#booksfilter a:hover{//背景色color:white;//前景色border-radius:5px;//圓角}</style>

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

$(function(){$('#booksfilter a').each(function(i){$(this).click(function(){$(this).addClass('cur');$(this).parent().siblings().find('a').removeClass('cur');//刪除其他任何選項的cur類$('.booklist').eq(i).show();//顯示本節(jié)點$('.booklist').eq(i).siblings().hide();//隱藏兄弟節(jié)點})});});