自己手写简约实用的Jquery tabs插件(基于bootstrap环境)

前端之家收集整理的这篇文章主要介绍了自己手写简约实用的Jquery tabs插件(基于bootstrap环境)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一直想改版网站首页的图书展示部分,以前的展示是使用BootStrap的传统的collapse,网页篇幅占用大,也不够美观,操作也相对来说比较麻烦。于是有了自己利用Jquery来做一个图书展示的tabs的想法,之前也在网上找了半天,并不是很满意。

下面来看看我的实现过程:

首先是HTML部分,HTML部分按照结构简约,突出干货的思路来设计。选项卡使用了列表,在列表中插入了超链接,当然这里的超链接只是作为按钮使用的,当点击任何一个链接,就切换到对应的选项卡。选项卡的内容部分直接使用DIV,将图书的展示一本一本的排列在div中,下面看看具体代码

  1. <div class="col-md-8" id="indexbooks">
  2. <!-- 选项卡部分 -->
  3. h4 ="title" style="padding-bottom:10px;">
  4. 图 书
  5. ul id="booksfilter"="float:right;font-size:14px;">
  6. li><a ="cur" href="javascript:void(0);">入门</aspan>|></href>实战>进阶ulh4="row"="booklist" 入门级图书展示 -->
  7. ="col-md-3">
  8. ="thumbnail"="height:220px; border-width:0px;">
  9. ="/book/577e11aa2f33c" target="_blank">
  10. img style="height:130px;" src="http://img3.doubanio.com/mpic/s1039608.jpg"> ="caption">
  11. h5 ="text-align:center;"
  12. LINUX权威指南(... h5>
  13. p
  14. 评论(0)&nbsp;span ="badge">1推荐pdiv>
  15. 其他入门图书(循环打印) -->
  16. 实战型图书展示 其他实战型图书(循环打印) 进阶型图书展示 其他进阶图书(循环打印) >

 

代码可知,该选项卡一共有三个选项,分为入门、实战、进阶,点击不同的选项卡,则会列出该类型的图书。

下面来看看样式表部分,看看如何美化选项卡及图书展示部分的内容

  1. <style>
  2. //选项卡列表样式
  3. #booksfilter li
  4. {
  5. padding:5px;//内边距 5px
  6. list-style-type:none;
  7. float:left;0px;
  8. }
  9. //设置‘|’的左右边距
  10. #booksfilter span
  11. {
  12. margin-left:
  13. margin-right:5px;
  14. }
  15. //选项卡链接的样式
  16. #booksfilter a
  17. {
  18. padding://内边距:5px
  19. text-decoration://无下划线
  20. }
  21. //选项卡被选中或当鼠标移动到选项卡时的样式
  22. #booksfilter a.cur,#booksfilter a:hover
  23. {
  24. background-color:#e67e22;//背景色
    color
    :white;//前景色
  25. border-radius://圆角
  26. }
  27. </style>

 

代码注释已经很详细了,当然大家也可以修改它来设计出更美的样式。而当选项卡点击切换的时候,这部分的交互就要交给Jquery来完成了,它需要设置当前点击的选项卡内容为要显示内容,而隐藏其他的选项卡,并且设置当前选项卡按钮为选中,删除其他选项卡的选中状态,下面上代码

  1. $(function()
  2. {
  3. $('#booksfilter a').each((i)
  4. {
  5. $(this).click((){
  6. $(this).addClass('cur');
  7. $(this).parent().siblings().find('a').removeClass('cur');//删除其他任何选项的cur类
  8. $('.booklist').eq(i).show();显示本节点
  9. $('.booklist').eq(i).siblings().hide();隐藏兄弟节点
  10. })
  11. });
  12. });

 

好了,以上就是实现全过程,下面上图,看看完成后的效果

QQ图片20160711172127.png

怎么样,还不错吧,当然你也可以修改上述代码做出更好看的tabs,期待与你的交流。

本文首发于顶求网,转载请注明来源。

猜你在找的Bootstrap相关文章