jquery实现多个选项卡

时间:2021-06-30 17:10:03
<!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>