帮我写一段代码 能够进行交互的 前面有个按钮点击进去就会有各种照片
时间: 2024-02-12 16:06:35 浏览: 28
好的,我可以帮您写一个简单的交互式按钮,点击后可以展示不同的照片。以下是一个使用 HTML 和 JavaScript 的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>交互式按钮</title>
<style>
img {
display: none; /* 默认隐藏所有照片 */
}
</style>
</head>
<body>
<button onclick="showPhoto(1)">照片1</button>
<button onclick="showPhoto(2)">照片2</button>
<button onclick="showPhoto(3)">照片3</button>
<img id="photo1" src="photo1.jpg">
<img id="photo2" src="photo2.jpg">
<img id="photo3" src="photo3.jpg">
<script>
function showPhoto(photoNum) {
/* 隐藏所有照片 */
var photos = document.getElementsByTagName('img');
for (var i = 0; i < photos.length; i++) {
photos[i].style.display = 'none';
}
/* 显示指定的照片 */
var photo = document.getElementById('photo' + photoNum);
photo.style.display = 'block';
}
</script>
</body>
</html>
```
这个代码创建了三个按钮,每个按钮都有一个 `onclick` 属性,当按钮被点击时会调用 `showPhoto` 函数,并传入一个参数表示要显示哪个照片。页面上也有三个 `img` 元素,它们的 `src` 属性指向不同的照片文件。初始时所有照片都是隐藏的,当某个按钮被点击时,会先隐藏所有照片,再显示对应的照片。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)