时间戳

首页 > 解决方案 > 在 js 中单击图像时显示 Div

javascript - 在 js 中单击图像时显示 Div

问题描述

我想要实现的是创建一个可点击的图像，显​​示一个 div。问题是您只能单击显示 div，但不能再次隐藏它。如果您单击其他图像，则该 div 将被另一个图像替换。

我已经设法用这行代码做到了这一点：

function myFunction() {
  document.getElementById("popis").innerHTML = "Hello World";
}

function myFunction2() {
  document.getElementById("popis").innerHTML = "text";
}

function myFunction3() {
  document.getElementById("popis").innerHTML = "Nejaky text ";
}
img {
  height: 150px;
}
<img src="https://clipart.info/images/ccovers/1495916678star-png-red-small-alpha-transparent-image-clip-art.png" onclick="myFunction()"></button>
<img src="https://clipart.info/images/ccovers/1495916678star-png-red-small-alpha-transparent-image-clip-art.png" onclick="myFunction2()"></button>
<img src="https://clipart.info/images/ccovers/1495916678star-png-red-small-alpha-transparent-image-clip-art.png" onclick="myFunction3()"></button>
<div id="popis"></div>

所以这是做什么的，它在图像点击时显示不同的文本。我没有得到它与你的 divs 一起工作。我希望能够将标题和文本段落放入 div 中，而不仅仅是单独的段落。因此，我希望默认显示一个 div 并在单击其他图像时进行更改。

之后我必须将它添加到 wordpress，但我得到了图像和 div 部分，所以我想这段代码非常简单。

此外，可以在这里使用 togle 或 array，但我最近无法使用它们。我至少用这些方法得到了一些结果。

标签： javascripthtmljquerycss

解决方案

为要显示的每组数据创建单独的 div 可能符合您的最大利益。您可以在动态 div 上设置 CSS 规则以使其成为display: none;默认值。然后你可以简单地document.getElementById("myDiv").style.display = "block";在需要展示它们的时候。或者$('myDiv').show();使用 jQuery。

推荐阅读