这是我的html
<img src="images/first.jpg" id="picture1" style="display:none;">
<img src="images/second.jpg" id="picture2" style="display:none;">
<img src="images/third.jpg" id="picture3" style="display:none;">
<button class="picture1" onclick="picture()">Picture1</button>
<button class="picture2" onclick="picture2()">Picture2</button>
<button class="picture3" onclick="picture3()">Picture3</button>
这是我的js
function picture(){
document.getElementById('picture1').src;
document.getElementById('picture1').style.display='block';
}
function picture2(){
document.getElementById('picture2').src;
document.getElementById('picture2').style.display='block';
}
function picture3(){
document.getElementById('picture3').src;
document.getElementById('picture3').style.display='block';
}
因此，如果我单击一个按钮显示该图片，而当我单击另一个按钮时该如何显示，则第一个按钮中的图片消失而当前单击的按钮中的图片出现？
您只需具有如下所示的一项功能即可轻松完成此操作。您可以首先隐藏图像，然后按按钮显示它。通过函数参数传递值，然后根据应该显示相应图片的按钮切换值。
function picture(num){
document.getElementById('picture').style.display = 'block';
switch(num) {
case 1: document.getElementById('picture').src = "https://picsum.photos/id/237/150/150"; break;
case 2: document.getElementById('picture').src = "https://picsum.photos/id/238/150/150"; break;
case 3: document.getElementById('picture').src = "https://picsum.photos/id/239/150/150"; break;
default: document.getElementById('picture').src = "https://picsum.photos/id/237/150/150"; break;
}
}<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="" width="150" height="150" id="picture" style="display: none;">
<br />
<button onclick="picture(1)">picture 1</button>
<button onclick="picture(2)">picture 2</button>
<button onclick="picture(3)">picture 3</button>
</body>
</html>function picture(){
document.getElementById('picture1').src;
document.getElementById('picture1').style.display='block';
document.getElementById('picture2').style.display='none';
document.getElementById('picture3').style.display='none';
}
function picture2(){
document.getElementById('picture2').src;
document.getElementById('picture2').style.display='block';
document.getElementById('picture1').style.display='none';
document.getElementById('picture3').style.display='none';
}
function picture3(){
document.getElementById('picture3').src;
document.getElementById('picture3').style.display='block';
document.getElementById('picture1').style.display='none';
document.getElementById('picture2').style.display='none';
};<img src="images/first.jpg" id="picture1" style="display:none;">
<img src="images/second.jpg" id="picture2" style="display:none;">
<img src="images/third.jpg" id="picture3" style="display:none;">
<button class="picture1" onclick="picture()">Picture1</button>
<button class="picture2" onclick="picture2()">Picture2</button>
<button class="picture3" onclick="picture3()">Picture3</button>