开发Jquery tab

为什么要自己写tab

为了更好的在首页图文并茂的展示图书信息以及按类别展示尽可能多的图书，我决定使用Jquery开发自己的tab。下面来看看我的实现过程。

HTML部分

1.标签项

标签仍然使用列表来完成，列表项即为标签项。

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

其中'a'标签的class="cur"表示当前被选中的标签。后面再CSS中会设置它的样式。

2.标签页内容区

使用3个DIV,分别存放入门、实战和进阶的图书。

    <div class="booklist">
        入门级图书……
   </div>
   <div class="booklist" style="display:none;">
        实战类图书……
   </div>
   <div class="booklist" style="display:none;">
        进阶类图书……
   </div>

可以看到，初始时，只有第一个标签页的内容是显示的，而其它两个标签页内容是隐藏（style="display:none;"）的,后面会利用Jquery来控制他们的切换。

3.使用缩略图（thumbnail）组件展示图书信息

在该组件中包含了图书封面、图书标题、和链接到该图书页面的超级链接。

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

另外，每本图书所占的宽度为col-md-3（为了适应右侧演示窗口，在右侧代码中改为了col-xs-3）,也就是每4本书占据一行。