DOM之选项卡 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{padding:0;margin:0;}

        ul{list-style:none;}

        #tab{
            width:480px;
            margin-top:55px;
            margin-left:auto;
            margin-right:auto;
            border:2px red solid;
        }

        /*ul下的li的属性*/
        ul li{
            float: left;
            width:160px;
            height:60px;
            line-height: 60px;
            text-align: center;
            background-color:grey;
        }

        /*ul下的li里的a的属性*/
        ul li a{
            text-decoration: none;
            color:black;
        }

        /*li的active属性*/
        li.active{
            background-color: aqua;
        }

        p{
            display:none;
            height:200px;
            text-align: center;
            line-height:200px;
            background-color: #2b84da;
        }

        p.active{
            display:block;
            font-size:36px;
        }

    </style>

</head>
<body>

    <div id="tab">
        <ul>
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">图片</a></li>
        </ul>

        <p class="active">首页内容</p>
        <p>新闻内容</p>
        <p>图片内容</p>
    </div>



    <script>
        var tab_li = document.getElementsByTagName('li');
        var tab_content = document.getElementsByTagName('p');

        for(var i=0;i<tab_li.length;i++){
            //保存变量i的临时值
            tab_li[i].index = i;
            tab_li[i].onclick = function () {
                for(var j=0;j<tab_li.length;j++){
                    tab_li[j].className = '';
                    tab_content[j].className = '';
                }
                this.className = 'active';
                tab_content[this.index].className = 'active';
            }
        }


    </script>

</body>
</html>
posted @ 2021-09-02 18:26  拾呓  阅读(28)  评论(0)  编辑  收藏  举报