js四个盒子点击变色其他三个不变
时间: 2023-08-18 22:07:04 浏览: 68
可以通过给每个盒子绑定点击事件,在事件处理函数中修改当前点击的盒子的颜色,同时将其他三个盒子的颜色恢复为原来的颜色。
以下是一个简单的实现示例:
HTML代码:
```html
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
```
CSS代码:
```css
.box {
width: 100px;
height: 100px;
display: inline-block;
margin-right: 10px;
background-color: gray;
cursor: pointer;
}
.selected {
background-color: blue;
}
```
JavaScript代码:
```javascript
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
boxes[i].addEventListener('click', function() {
// 将当前点击的盒子的颜色修改为蓝色
this.classList.add('selected');
// 将其他三个盒子的颜色恢复为灰色
for (var j = 0; j < boxes.length; j++) {
if (boxes[j] !== this) {
boxes[j].classList.remove('selected');
}
}
});
}
```
在上面的代码中,我们首先获取所有的盒子元素,然后给每个盒子元素绑定点击事件。在事件处理函数中,我们首先将当前点击的盒子的颜色修改为蓝色,然后遍历其他三个盒子,将它们的颜色恢复为灰色。这样就实现了点击一个盒子变色,其他三个盒子不变色的效果。