jQuery - 选项卡 -

最新推荐文章于 2022-10-24 17:31:20 发布

赵羽珩

最新推荐文章于 2022-10-24 17:31:20 发布

阅读量187

点赞数

分类专栏： jquery

jquery 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

这里写图片描述

<!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>