jQuery切换tab标签

最新推荐文章于 2021-08-06 10:39:58 发布

yamdork93

最新推荐文章于 2021-08-06 10:39:58 发布

阅读量313

点赞数

本文链接：https://blog.csdn.net/yamdork93/article/details/71195460

版权

小结：tab标签通过与对应内容index绑定,为当前tab添加一个样式，移除其他，显示当前内容块，隐藏其他内容。（即tab[0]==>section[0]）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <style>
        *{padding: 0;margin: 0}
        ul{width: 300px;border: 1px solid #0e90d2;text-align: center}
        ul li{list-style: none;}
        div{margin: 100px;}
        ul.tab{overflow: hidden}
        ul.tab li{
            float: left;
            width: 50%;
        }
        .activity{background: #00E8D7}
    </style>
</head>
<body>
<div>
    <ul class="tab">
        <li>tab1</li>
        <li>tab2</li>
    </ul>
    <ul class="section">
        <li >section1</li>
        <li >section2</li>
    </ul>
</div>
<script>
    jqtab('.tab', '.section', 'click');
    //可以封装成方法  直接调用
    function jqtab(tab,section,event) {
        $(section+'>li').hide();
        $(tab).find("li").eq(0).addClass("activity").show();
        $(section).find("li").eq(0).show();

        //绑定事件
        $(tab).find("li").bind(event,function(){
            $(this).addClass("activity").siblings("li").removeClass("activity");
            var activeindex = $(tab).find("li").index(this);
            $(section).children().eq(activeindex).siblings().hide();
            if($(section).children().eq(activeindex).hide())
            {
                $(section).children().eq(activeindex).show();
            }
            return false;
        });
    }

</script>
</body>
</html>