第1行的每个按钮添加onclick事件;修改标签图片img的src属性;
时间: 2024-05-07 17:22:56 浏览: 118
JQuery学习笔记 实现图片翻转效果和TAB标签切换效果第1/2页
假设你有以下 HTML 代码:
```html
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<img id="myImg" src="old_image.jpg" alt="旧图片">
```
你可以使用 JavaScript 添加 onclick 事件和修改图片的 src 属性,如下所示:
```javascript
// 获取按钮和图片元素
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var img = document.getElementById("myImg");
// 给按钮1添加 onclick 事件
btn1.onclick = function() {
img.src = "new_image_1.jpg";
}
// 给按钮2添加 onclick 事件
btn2.onclick = function() {
img.src = "new_image_2.jpg";
}
// 给按钮3添加 onclick 事件
btn3.onclick = function() {
img.src = "new_image_3.jpg";
}
```
当用户单击按钮时,图片的 src 属性会相应地更改为新图片的 URL,从而显示不同的图片。
阅读全文