jquery实现单击四个按钮分别显示对应的图片即可(替换图片)
时间: 2023-10-23 20:12:06 浏览: 49
可以使用以下代码实现:
HTML:
```
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>
<div id="img-container">
<img id="img1" src="img1.jpg">
<img id="img2" src="img2.jpg">
<img id="img3" src="img3.jpg">
<img id="img4" src="img4.jpg">
</div>
```
jQuery:
```
$(document).ready(function() {
// 默认显示第一张图片
$('#img2, #img3, #img4').hide();
// 绑定按钮单击事件
$('#btn1').click(function() {
$('#img-container img').hide();
$('#img1').show();
});
$('#btn2').click(function() {
$('#img-container img').hide();
$('#img2').show();
});
$('#btn3').click(function() {
$('#img-container img').hide();
$('#img3').show();
});
$('#btn4').click(function() {
$('#img-container img').hide();
$('#img4').show();
});
});
```
需要注意的是,这里我默认隐藏了除第一张图片之外的其他图片,如果要改成默认显示其他图片,可以把上面的代码中 `hide()` 改成 `show()`。
相关推荐
![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)