淘先锋技术网

首页 1 2 3 4 5 6 7

jquery实现横向Tab页切换

HTML：

<ul class="tab">
    <li class="active">农户</li>
    <li>经营主体</li>
    <li>经纪人</li>
    <li>采购商</li>
    <div class="clear"></div>
</ul>
<ul class="tabSecond">
    <li class="active"><a href="javascript:void(0);" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >基本信息</a></li>
    <li><a href="javascript:void(0);" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >资产信息</a></li>
    <li><a href="javascript:void(0);" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >经营产品</a></li>
    <li><a href="javascript:void(0);" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >产品产量</a></li>
    <li><a href="javascript:void(0);" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >产品销售</a></li>
    <div class="clear"></div>
</ul>

CSS：

.tab{
    background: #FFFFFF;
    padding: 12px 35px;
    border-radius: 12px;
}
.tab li{
    float: left;
    padding: 5px 18px;
    background: #e4e4e4;
    color: #333333;
    margin-right: 22px;
    font-size: 16px;
    border-radius: 25px;
    width: 100px;
    text-align: center;
}
.tab li:hover{
    background: #168a44!important;
    color: #FFFFFF!important;
    cursor: pointer;
}
.tab li:hover a{
    color: #FFFFFF!important;
}
.tab .active{
    background: #168a44!important;
    color: #FFFFFF!important;
}
.tabSecond{
    background: #FFFFFF;
    padding: 12px 35px;
    border-radius: 12px;
    margin-top: 15px;
}
.tabSecond li{
    float: left;
    padding: 2px 18px;
    background: #f4f4f4;
    margin-right: 22px;
    font-size: 14px;
    border-radius: 5px;
    width: 100px;
    text-align: center;
}
.tabSecond li a{
    color: #168a44;
}
.tabSecond li:hover {
    background: #d0e8da;
    cursor: pointer;
}
.tabSecond .active{
    background: #d0e8da;
}

JS：

        var tabs = $('.tab').find('li');
        var tabsSecond = $('.tabSecond').find('li');

        tabs.on('click', function (e) {

            e.preventDefault();//防止打开链接

            tabs.removeClass('active');
            tabsSecond.removeClass('active');

            $(this).addClass('active');
            $($(".tabSecond").children("li").get(0)).addClass('active');
        });

        tabsSecond.on('click', function (e) {

            e.preventDefault();//防止打开链接

            tabsSecond.removeClass('active');

            $(this).addClass('active');

        });

效果：

 实现切换标签，切换后二级标签样式重置，更替页面内容自行数据请求