我有四个 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>
下面是两个 div
,单击后上面的图像应隐藏并显示
<div class="option_image"><img src="image/option_1.png"/></div>
<div class="option_image_one"><img src="image/option_1.png"/></div>
最佳答案
如果您不使用任何第三方 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)
示例(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>
示例(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 -->
关于javascript - 如何在 HTML 中点击时隐藏或显示 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10222797/