<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權威指南（... </a></h5>
<p style="text-align:center;">
評論(0)&nbsp;<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權威指南（... </a></h5>
<p style="text-align:center;">
評論(0)&nbsp;<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權威指南（... </a></h5>
<p style="text-align:center;">
評論(0)&nbsp;<span class="badge">1推薦</span></p>
</div>
</div>
</div>
<!-- 其他進階圖書（循環(huán)打?。?-->
</div>
</div>

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

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

<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>

代碼注釋已經(jīng)很詳細了，當然大家也可以修改它來設計出更美的樣式。而當選項卡點擊切換的時候，這部分的交互就要交給Jquery來完成了，它需要設置當前點擊的選項卡內容為要顯示的內容，而隱藏其他的選項卡，并且設置當前選項卡按鈕為選中，刪除其他選項卡的選中狀態(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é)點
})
});
});