javascript 如何在 HTML 中单击时隐藏或显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10222797/
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
How to hide or show div on click in HTML
提问by Hymanson J
I have four HTML divI want to show and hide them on click how to do this
我有四个 HTML，div我想在单击时显示和隐藏它们如何执行此操作
<div id="targetid" class="image_one"><img src="image/imageone.png"/></div>
<div id ="targetidone "class="image_two"><img src="image/imagetwo.png"/></div>
<div id="targetidtwo" class="image_one_one"><img src="image/pagetwo_graph_two_11.png"/></div>
<div id ="targetidfour"class="image_two_two"><img src="image/pagetwo_graph_two_22.png"/></div>
below are those two divon which after click the above image should hide and show
下面是div点击上面图片后应该隐藏和显示的两个
<div class="option_image"><img src="image/option_1.png"/></div>
<div class="option_image_one"><img src="image/option_1.png"/></div>
回答by Muhammad Alvin
If you don't use any 3rd party javascript (eg: jQuery), then use it:
如果您不使用任何 3rd 方 javascript（例如：jQuery），请使用它：
document.getElementById('target-id').style.display = 'none'; // hide it
document.getElementById('target-id').style.display = 'block'; // show it (for block element, eg: div)
document.getElementById('target-id').style.display = 'inline'; // show it (for inline element, eg: span)
Example (1):
示例（1）：
<div id="target-id">hello workd</div> <!-- attribute: id -->
<a href="#" onclick="document.getElementById('target-id').style.display = 'none'; return false;">hide it</a>
<a href="#" onclick="document.getElementById('target-id').style.display = 'block'; return false;">show it</a>
Example (2):
示例（2）：
<div id="targetid" class="image_one" onclick="document.getElementById('targetid').style.display = 'none';"><img src="image/imageone.png"/></div> <!-- adding onclick to hide this element when you click it -->
<div class="option_image" onclick="document.getElementById('targetid').style.display = 'block';"><img src="image/option_1.png"/></div> <!-- adding onclick to show element #targetid when you click this -->
回答by Thiliban
$("buttonid").click(function () {
$("divid").toggle();
});
Buttonid - Id of the button which you will click divid - Id of the div which you need to show/hide
Buttonid - 您将单击的按钮的 ID divid - 您需要显示/隐藏的 div 的 ID
note:include jquery script
注意：包含 jquery 脚本
回答by Damir Olejar
As muhhamad alvin has posted, you may want to reverse the way things are displayed. So, tweaking his solution gave me this result:
正如穆罕默德·阿尔文 (muhhamad alvin) 所发布的那样，您可能想要颠倒事物的显示方式。所以，调整他的解决方案给了我这个结果：
How it functions?
它是如何运作的？
-Click on Question to show an Answer, click on Answer to hide the Answer (Question is always displayed). So, just replace the Question and Answer with your own divs.
- 单击问题以显示答案，单击答案隐藏答案（问题始终显示）。因此，只需将问题和答案替换为您自己的 div。
<a href="#" onclick="document.getElementById('target-id').style.display = 'block'; return false;">Question</a>
<div id="target-id" style="display: none;"><a href="#" onclick="document.getElementById('target-id').style.display = 'none'; return false;">Answer</a> </div> <!-- attribute: id -->Edit: The thing to note is that for every Question/Answer pair, you will need a different 'target-id'.
编辑：需要注意的是，对于每个问题/答案对，您都需要一个不同的“目标 ID”。
回答by Pangeran Oby
you can try this:
你可以试试这个：
$(".image_one").toggle();
$(".image_one").toggle();
the code above grab the element by name of class. if you dont have a class there,you can get by id just like this:
上面的代码按类的名称获取元素。如果你在那里没有课程，你可以像这样通过 id 获得：
$("#image_one").toggle();
$("#image_one").toggle();
hope this useful
希望这有用
