js四个盒子点击变色
时间: 2023-08-17 08:06:06 浏览: 80
好的,下面是一个简单的实现方法:
HTML 代码:
```html
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
```
CSS 代码:
```css
.box1, .box2, .box3, .box4 {
width: 100px;
height: 100px;
background-color: #ccc;
margin-bottom: 10px;
cursor: pointer;
}
.box1.active, .box2.active, .box3.active, .box4.active {
background-color: #f00;
}
```
JavaScript 代码:
```javascript
// 获取四个盒子元素
const box1 = document.querySelector('.box1');
const box2 = document.querySelector('.box2');
const box3 = document.querySelector('.box3');
const box4 = document.querySelector('.box4');
// 给四个盒子添加点击事件
box1.addEventListener('click', function() {
this.classList.toggle('active');
});
box2.addEventListener('click', function() {
this.classList.toggle('active');
});
box3.addEventListener('click', function() {
this.classList.toggle('active');
});
box4.addEventListener('click', function() {
this.classList.toggle('active');
});
```
这段代码会给四个盒子元素绑定点击事件,每次点击时切换它们的 `active` 类,从而改变它们的背景颜色。
阅读全文