点击div,其他div变色
时间: 2023-07-19 19:46:27 浏览: 56
好的,我理解了您的问题。实现这个功能需要使用JavaScript来操作DOM元素。以下是一个简单的实现过程:
1. 获取所有的div元素,并将它们保存在一个数组中。
2. 给每个div元素添加一个点击事件监听器。
3. 在点击事件处理函数中,遍历所有的div元素,如果当前div元素与被点击的div元素相同,则将它的背景颜色设置为红色,否则将它的背景颜色设置为默认颜色。
下面是一个示例代码,供您参考:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击div,其他div变色</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 10px;
float: left;
text-align: center;
line-height: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<script>
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
boxes[i].addEventListener('click', function() {
for (var j = 0; j < boxes.length; j++) {
if (boxes[j] === this) {
boxes[j].style.backgroundColor = 'red';
} else {
boxes[j].style.backgroundColor = '#ccc';
}
}
});
}
</script>
</body>
</html>
```
当您点击任何一个div元素时,其他所有的div元素的背景颜色都会变成默认颜色,而被点击的div元素的背景颜色会变成红色。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)