使用原生的html5实现排他功能

最新推荐文章于 2023-08-28 23:40:05 发布

邪小新

最新推荐文章于 2023-08-28 23:40:05 发布

阅读量649

点赞数

分类专栏： html 文章标签：使用原生的js实现排他功能

本文链接：https://blog.csdn.net/qq_42074075/article/details/97524946

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

 <style>
        .aa {
            width: 300px;
            height: 300px;
            background-color: red;
            border: 1px solid #ccc;
        }

        .aa.active {
            background-color: green;
        }
    </style>

<div class="aa active"></div>
<div class="aa"></div>
<script>
    let aa = document.querySelectorAll(".aa")
    aa.forEach(item=>{
        item.onmouseover=function () {
            for (let i = 0; i <aa.length ; i++) {
                aa[i].classList.remove('active')
            }
            this.classList.add('active')

        }
    })
</script>