jquery实现多个选项卡

最新推荐文章于 2019-07-01 13:47:00 发布

weixin_30596343

最新推荐文章于 2019-07-01 13:47:00 发布

阅读量274

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/150536FBB/p/9787620.html

版权

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--自己的css-->
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
        <!--选项卡1-->
        <div class="tab" id="tab1">
            <ul class="tab-title clear">
                <li class="active">详情</li>
                <li>评价</li>
                <li>活动</li>
                <li>问答</li>
            </ul>
            <ul class="tab-content">
                <li>第一个</li>
                <li>第二个</li>
                <li>第三个</li>
                <li>第四个</li>
            </ul>
        </div>
        <!-- 第二个 -->
        <div class="tab" id="tab2">
            <ul class="tab-title clear">
                <li class="active">详情</li>
                <li>评价</li>
                <li>活动</li>
                <li>问答</li>
            </ul>
            <ul class="tab-content">
                <li>第一个</li>
                <li>第二个</li>
                <li>第三个</li>
                <li>第四个</li>
            </ul>
        </div>

    </body>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        console.log($(".table_title li"));
        $(".tab-title li").click(function() {
            
            $(this).siblings().removeClass("active")
            $(this).addClass("active");
            //获取索引值
            var i = $(this).index();
            //全部隐藏
            $(this).parent().siblings(".tab-content").find("li").css("display", "none");
            $(this).parent().siblings(".tab-content").find("li").eq(i).css("display", "block");

        })
    </script>

</html>