通过html+css+js实现当点击某个div时,会有前三个图片消失,后三个图片出现
时间: 2024-01-28 09:03:26 浏览: 33
好的,可以通过以下代码实现:
首先,在HTML中需要将图片分组,前三个和后三个分别放在不同的div中,并且为每个div设置一个唯一的id,例如:
```html
<div id="first-three">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
<div id="last-three">
<img src="image4.jpg">
<img src="image5.jpg">
<img src="image6.jpg">
</div>
```
接下来,在JavaScript中,我们可以通过获取这两个div的id,以及为它们添加点击事件来实现效果:
```js
var firstThree = document.getElementById("first-three");
var lastThree = document.getElementById("last-three");
firstThree.addEventListener("click", function() {
// 隐藏前三张图片
for (var i = 0; i < 3; i++) {
firstThree.children[i].style.display = "none";
}
// 显示后三张图片
for (var i = 0; i < 3; i++) {
lastThree.children[i].style.display = "block";
}
});
```
这段代码中,我们先获取了前三个图片所在的div和后三个图片所在的div,然后为前三个图片所在的div添加了一个点击事件,当该div被点击时,通过循环将前三个图片隐藏,后三个图片显示。
相关推荐
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)