40jsbom,标签栏切换

<head>
    <meta charset="UTF-8">
    <title>7.示例-常用的js效果-标签栏切换</title>
    <style>
        *{margin: 0; padding: 0;}
        .box{
            width: 400px;
            border: 2px solid;
            background-color: aliceblue;
            margin: 30px auto;
        }
        .tab{
            overflow: hidden;
            background-color: darkcyan;
            color: #e2e2e2;
        }
        .tab div{
            float: left;
            width: 25%;
            text-align: center;
            user-select: none;
            cursor: pointer;
        }
        .tab div:hover{
            color: white;
        }
        .chosen{
            background-color: #54f5ff;
            color: black;
        }
        .content{
            height: 100px;
        }
        .content div{
            display: none;
        }
        .content .show{
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="tab">
            <div class="chosen">新闻</div>
            <div>娱乐</div>
            <div>体育</div>
            <div>游戏</div>
        </div>
        <div class="content">
            <div class="show">国外水深火热...</div>
            <div>我们有娱乐...</div>
            <div>冬奥会来了...</div>
            <div>英雄联盟出手游了...</div>
        </div>
    </div>
</body>
<script>

    /* 为tab选项添加单击事件 */
    //获取tab选项数组
    let tags_tab_div = document.getElementsByClassName("tab")[0].getElementsByTagName("div");
    //获取content内容数组
    let tags_content_div = document.getElementsByClassName("content")[0].getElementsByTagName("div");

    //遍历数组, 绑定单击事件
    for (let i = 0; i < tags_tab_div.length; i++) {
        //为每个tab选择添加一个自定义属性index
        tags_tab_div[i].index = i;

        tags_tab_div[i].onclick = function () {
            //遍历数组
            for (let j = 0; j < tags_tab_div.length; j++) {
                //清除所有选项的chosen
                tags_tab_div[j].className = "";
                //清除所有内容div的show
                tags_content_div[j].className = "";
            }
            //为触发单击事件的选项添加chosen
            this.className = "chosen";
            //为触发事件的选项对应的内容div添加show
            tags_content_div[this.index].className = "show";
        }
    }

</script>
posted on 2022-04-11 17:10 小小程序猿level1 阅读(72) 评论(0) 收藏举报