js单击元素时，修改当前元素的样式，还原上一个元素的样式 

<html>
    <head>
        <style>
            #tasklist{
                /* background-color:gray; */
                display: flex;
            }
            .item{
                margin-right: 20px;
            }
            .active{
                border-bottom: 3px solid orange;
            }
        </style>
    </head>
    <body>
        <div id="tasklist">
            <div class="item active">任务汇总</div>
            <div class="item ">审核统计</div>
        </div>
        <div>我在底层</div>
        <script>
            var items = document.getElementsByClassName("item");
            console.log(items)
            for (let index = 0; index < items.length; index++) {
                const element = items[index];
                element.onclick =function(){
                    //移除下划线样式
                    for (let index = 0; index < items.length; index++) {
                        const element = items[index];
                        element.classList.remove("active")
                    }
                    //添加当前元素的下划线样式
                    this.classList.add("active")
                }               
            }
        </script>
    </body>
</html>

效果图：

posted @ 2023-10-19 15:55  三鸡  阅读(251)  评论(0)  编辑  收藏  举报