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

Question

我有四个 HTMLdiv我想显示并在单击时隐藏它们 如何执行此操作

            <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

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

示例（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

$("buttonid").click(function () {
$("divid").toggle();
});

Buttonid - 您将单击的按钮的 ID Divid - 您需要显示/隐藏的 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 -->

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

Answer 4

你可以试试这个：

$(".image_one").toggle();

上面的代码按类的名称获取元素。如果您在那里没有课程，您可以像这样通过 id 获取：

$("#image_one").toggle();

希望这有用