jQuery - 选项卡 -

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- CSS部分 -->
    <style type="text/css">
        *{
            padding:0;
            margin:0;
            list-style:none;
        }
        .tab {
            width:300px;
            height:300px;
            margin:0 auto;
        }
        .tab ol {
            float:left;
            width:300px;
            height:50px;
            background:blue;
        }
        .tab ol li {
            float:left;
            width:100px;
            height:50px;
            line-height:50px;
            text-align:center;
            background:green;
        }
        .tab ol li.active {
            background:yellow;
        }

        .tab ul {
            float:left;
            width:300px;
            height:250px;
        }
        .tab ul li {
            float:left;
            width:300px;
            height:250px;
            line-height:200px;
            text-align:center;
            display:none;/* - 每一页的内容区域要隐藏 - */
            background:#ddd;
        }
        .tab ul li.cur {
            display:block;/* - 显示带"cur"的第一项 - */
        }
    </style>
</head>
<body>
    <!-- HTML部分 -->
    <div id="tab" class="tab">
        <ol>
            <li class="active">热点</li>
            <li>时政</li>
            <li>财经</li>
        </ol>
        <ul>
            <li class="cur">热点</li>
            <li>时政</li>
            <li>财经</li>
        </ul>
    </div>
    <!-- JS部分 -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $("#tab ol li").click(function(){
                now = $(this).index();
                tab();
            });
            function tab(){
                $("#tab ol li").eq(now).addClass('active').siblings().removeClass('active');
                $("#tab ul li").eq(now).addClass('cur').siblings().removeClass('cur')
            }
        });

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

JS部分 の 简化

    <script type="text/javascript">
        $(function(){
            $("#tab ol li").click(function(){
                $(this).addClass('active').siblings().removeClass('active');
                $("#tab ul li").eq($(this).index()).addClass('cur').siblings().removeClass('cur')
            });
        });
    </script>
版权声明:本文为weixin_41170223原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41170223/article/details/78672493