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

前端开发作者： 2024-08-19 17:55:01

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

导读热词

正文

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

<style>
//选项卡列表样式
#booksfilter li
{
padding:5px;//内边距 5px
list-style-type:none;
float:left;0px;
}
//设置‘|’的左右边距
#booksfilter span
{
margin-left:
margin-right:5px;
}

//选项卡链接的样式
#booksfilter a
{
    padding://内边距：5px
    text-decoration://无下划线
}
//选项卡被选中或当鼠标移动到选项卡时的样式
#booksfilter a.cur,#booksfilter a:hover
{
    background-color:#e67e22;//背景色    
    color:white;//前景色
    border-radius://圆角
}

</style>

$(function()
{
$('#booksfilter a').each((i)
{

$(this).click((){
$(this).addClass('cur');
$(this).parent().siblings().find('a').removeClass('cur');//删除其他任何选项的cur类
$('.booklist').eq(i).show();显示本节点
$('.booklist').eq(i).siblings().hide();隐藏兄弟节点
})

});

});