Html 单击按钮时出现的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6068863/
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
Image appearing when clicking a button
提问by Bryan
How do I make a hidden image appear when a submit button is clicked?
单击提交按钮时如何显示隐藏图像？
回答by Blender
You were lucky I had a blank HTML page ready:
你很幸运，我已经准备好了一个空白的 HTML 页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
.hidden {
display: none;
}
</style>
</head>
<body>
<form>
<input type="submit" id="submit" onclick="document.getElementById('hidden').style.display = 'block';" />
</form>
<img id="hidden" class="hidden" src="foo.png" />
</body>
</html>
回答by Andy Davies
Using jQuery:
使用jQuery：
<img id="image1" src="myimage.jpg" style="display:none;" width="120" height="120"/>
<input type="submit" name="submit" value="submit" onclick"$('#image1').show()"/>
回答by John
That would depend on how you are hiding it. The easiest way to do it would be to change the class name of the image from one that makes it hidden to one that does not.
这取决于你如何隐藏它。最简单的方法是将图像的类名从隐藏的类名更改为不隐藏的类名。
<img src="thesource" class="hidden">
document.getElementById("theid").className = ""; // remove the hidden class.
.classHidden {
display: none;
}
回答by Amareswar
document.getElementById("submitBtn").onclick = function() {
document.getElementById("imageTag").style.display="block";
return true;
}
回答by Christophe
Here's an example
这是一个例子
<img class="image_file src="image.jpg" />
<input type="submit" id="submit_button" name="submit_button" />
hide the image in css:
在css中隐藏图像：
.image_file
{
display:none;
}
with jquery:
使用 jquery：
$('#submit_button').click(function(
$('.image_file').show();
));
and try to avoid inline javascript, it's messy and difficult to maintain when you have a big website.
并尽量避免内联 javascript，当您拥有一个大型网站时，它会变得混乱且难以维护。
