html点击三个按钮分别切换为对应图片
时间: 2023-12-10 12:38:12 浏览: 97
您可以使用以下HTML代码来实现该功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>切换图片</title>
<style>
img {
display: none;
max-width: 100%;
}
</style>
</head>
<body>
<button onclick="showImage(1)">按钮1</button>
<button onclick="showImage(2)">按钮2</button>
<button onclick="showImage(3)">按钮3</button>
<img id="image1" src="image1.jpg">
<img id="image2" src="image2.jpg">
<img id="image3" src="image3.jpg">
<script>
function showImage(imageNumber) {
// 隐藏所有图片
document.querySelectorAll("img").forEach(img => img.style.display = "none");
// 显示对应的图片
document.querySelector("#image" + imageNumber).style.display = "block";
}
</script>
</body>
</html>
```
该代码使用了 JavaScript 来实现点击按钮时切换图片的功能。CSS 部分将所有图片设为 `display: none`,即隐藏状态。
在 HTML 部分,添加三个按钮和三张图片,并为每张图片设置了一个 ID。当用户点击按钮时,调用 `showImage()` 函数。该函数会隐藏所有图片,然后根据传入的参数显示对应的图片。
注意:您需要将 `src` 属性中的图片路径替换为您自己的图片路径。
相关推荐
![html](https://img-home.csdnimg.cn/images/20210720083451.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)