如何用JavaScript实现同class的div点击排他性变色效果

需求说明 #

有4个class为box的div元素，需要实现点击切换颜色的排他效果：点击任意一个div时，该div变色，之前被选中的div恢复默认颜色。效果为：选中的div呈现高亮样式，未选中的保持初始样式。

完整代码实现 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            margin: 10px;
            display: inline-block;
            background-color: #e0e0e0;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .box.active {
            background-color: #2196F3;
            color: white;
        }
    </style>
</head>
<body>
    <div class="box">Box1</div>     
    <div class="box">Box2</div>     
    <div class="box">Box3</div>    
    <div class="box">Box4</div>  

    <script>
        // 获取所有box元素
        const boxes = document.querySelectorAll('.box');
        
        boxes.forEach(box => {
            box.addEventListener('click', function() {
                // 先移除所有box的active类
                boxes.forEach(item => item.classList.remove('active'));
                // 给当前点击的box添加active类
                this.classList.add('active');
            });
        });
    </script>
</body>
</html>

代码逻辑说明 #

• CSS部分：
  • 给.box设置默认外观样式，包括背景色、尺寸、间距等，添加过渡动画让颜色切换更平滑。
  • 定义.box.active类，作为选中状态的样式（蓝色背景+白色文字）。
• JS部分：
  1. 使用document.querySelectorAll('.box')获取所有目标div元素。
  2. 遍历每个box，绑定点击事件：
     • 点击时先遍历所有box，移除它们的active类，实现“排他”重置所有元素状态。
     • 再给当前被点击的box添加active类，让它呈现选中样式。

内容的提问来源于stack exchange，提问作者Hardik