Question

我想这样做，以便当我单击一个术语时，会显示一个<div></div>框。这是我的代码：

<a><u>ilioinguinal and genitofemoral nerves</u><div><img src="paste-66846870995528.jpg" /></div></a>

现在我有了它，所以默认设置是如果a>div则div隐藏：

a>div { display: none; }

如果div悬停了，我只会显示<a></a>：

a:hover>div {
border: 1px solid black;
font-weight:normal;
font-family:garamond;
font-size: 14px;
display: block;
text-align:center;}

但是，正如我前面提到的，我喜欢这样做，以便在单击术语时可以显示div。

我看到了使用它的教程：

<script>
function clickDiv() {
  var x = document.getElementById("clickable");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

<a onclick="clickDiv()"><u>ilioinguinal and genitofemoral nerves,</u><div id="clickable"><img src="paste-66846870995528.jpg" /></div></a>

但这仅显示第一个短语的图像，而不显示与我单击的特定短语相关的图像。

Answer 1

如果您想要真正的切换，这将起作用：

document.addEventListener('click', evt => {
  var el = evt.target;
  if (el.tagName === 'U') {
    el = el.parentElement;
  }
  if (el.tagName === 'A') {
    el.classList.toggle('open');
  }
});

a > div {
  display: none;
}

a.open > div {
  border: 1px solid black;
  display: block;
  font: 14px garamond;
  text-align:center;
}

<a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/>
<a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/>
<a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/>
<a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/>
<a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/>
<a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/>
<a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/>

您可以将自己想要的内容放在<div>中。

事件处理程序发生在<u>标记上，因此我们需要向上使用其父元素<a>标记。然后，我们切换类'open'。

如果您希望新打开的项目关闭其他项目，请尝试以下操作：

document.addEventListener('click', evt => {
  var el = evt.target;
  if (el.tagName === 'U') {
    el = el.parentElement;
  }
  var oldEl = document.querySelector('a.open');
  if (oldEl && oldEl !== el) {
    oldEl.classList.remove('open');
  }
  
  if (el.tagName === 'A') {
    el.classList.toggle('open');
  }
});

a > div {
  display: none;
}

a.open > div {
  border: 1px solid black;
  display: block;
  font: 14px garamond;
  text-align:center;
}

<a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/>
<a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/>
<a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/>
<a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/>
<a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/>
<a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/>
<a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/>

Answer 2

您可以使用jQuery做类似的事情。

$(function() {
    $('.class-of-a').click(function(e) {
        e.preventDefault;
        var target = $(this).attr('data-target');

        $(target).css({display: 'block'});
    });
});

然后将属性设置为

<a data-target="#targetID">Link</a>

按下特定按钮后，将显示所选的targetID。

Javascript如何隐藏短语的div onclick

2 个答案: