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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:41:15  来源:igfitidea点击:

Image appearing when clicking a button

htmlimagebuttonclickhidden

提问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,当您拥有一个大型网站时,它会变得混乱且难以维护。