Question

如何在 HTML 中单击时隐藏或显示 div

2012-04-19

19436

javascript html

我有四个 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>

Answer 1

如果您不使用任何第三方 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 -->

Answer 2

329947649

buttonid-按钮的ID，您将单击该按钮 Divid-您需要显示/hide

的DIV的ID注意：包括jQuery脚本

Answer 3

正如 muhhamad alvin 所发帖，您可能希望反转显示内容的方式。因此，调整他的解决方案给了我这个结果：

它如何运作？

-单击问题以显示答案，单击答案以隐藏答案（问题始终显示）。因此，只需用您自己的 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 -->

编辑：需要注意的是，对于每个问题/答案对，您将需要一个不同的“target-id”。