Question

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

$("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。”）切换（）;

上面的代码按类的名称获取元素。如果你没有上课，你可以通过id得到这样的：

$（ “＃image_one”）切换（）;

希望这个有用

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

4 个答案: