成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

一直想改版網站首頁的圖書展示部分，以前的展示是使用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  target="_blank">
<img style="height:130px;" src="http://img3.doubanio.com/mpic/s1039608.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a  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  target="_blank">
<img style="height:130px;" src="http://img3.doubanio.com/mpic/s1039608.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a  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  target="_blank">
<img style="height:130px;" src="http://img3.doubanio.com/mpic/s1039608.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a  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插件，希望對大家有所幫助，如果大家想了解更多內容敬請關注綠夏網！