Html html点击按钮显示/隐藏图片？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16504202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html click button display/hide picture?
提问by user2278906
So, I am new to html and say I have 2 buttons named "Show Picture 1" and "Show Picture 2"
所以，我是 html 的新手，并说我有 2 个按钮，名为“显示图片 1”和“显示图片 2”
I want to be able to display Picture1 after clicking the button "Show Picture 1".
我希望能够在单击“显示图片 1”按钮后显示图片 1。
I also want to be able to display Picture2 where Picture1 was (and hide Picture1 if Picture1 was being displayed).
我还希望能够在图片 1 所在的位置显示图片 2（如果正在显示图片 1，则隐藏图片 1）。
What is the code I should write to allow this to happen?
我应该写什么代码来允许这种情况发生？
My code so far for displaying picture 1:
到目前为止，我用于显示图片 1 的代码：
<style type="text/css">
.show{display:block;}
.hide{display:none;}
</style>
<script type="text/javascript">
function showImg()
{
var obj=document.getElementById('Picture1');
obj.className = 'show';
}
</script>
<center>
<img id="Picture1" src=Picture1.jpg" class="hide">
<input type="button" onclick = "showImg()" value= "Picture1">
</center>
Thanks
谢谢
回答by Sridhar
/// if ur looking to toggle image try this simple code////
/// 如果你想切换图像试试这个简单的代码////
<script type = "text/javascript">
function pic1()
{
document.getElementById("img").src = "picture 1 source";
}
function pic2()
{
document.getElementById("img").src ="picture 2 source";
} </script>
<img src = "" id = "img"/> <input type="button" value="Show Picture
1" onclick="pic1()"/> <input type="button" value="Show Picture 2"
onclick="pic2()"/>
