html实现点击不同按钮显示不同图片

可以使用HTML和JavaScript来实现这个功能。

首先，在HTML中创建按钮和图片元素，并为每个按钮添加一个唯一的ID：

<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>

<img id="img1" src="image1.jpg">
<img id="img2" src="image2.jpg">
<img id="img3" src="image3.jpg">

接下来，在JavaScript中，使用事件监听器来检测按钮的点击事件，并根据点击的按钮ID来更改图片的显示：

// 获取按钮和图片元素
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");

var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var img3 = document.getElementById("img3");

// 为按钮添加点击事件监听器
btn1.addEventListener("click", function() {
  img1.style.display = "block"; // 显示图片1
  img2.style.display = "none"; // 隐藏图片2
  img3.style.display = "none"; // 隐藏图片3
});

btn2.addEventListener("click", function() {
  img1.style.display = "none"; // 隐藏图片1
  img2.style.display = "block"; // 显示图片2
  img3.style.display = "none"; // 隐藏图片3
});

btn3.addEventListener("click", function() {
  img1.style.display = "none"; // 隐藏图片1
  img2.style.display = "none"; // 隐藏图片2
  img3.style.display = "block"; // 显示图片3
});

这样，当用户点击不同的按钮时，就会显示对应的图片。