如何 show/hide 复数 div 与 javascript？

Question

我和我的同事正在做一个项目，我们制作一个网站来向人们展示我们的研究。我们有 1 页，其中包含一些主题的许多描述。一共有6个。系统生物学、蛋白质组学、基因组学、转录组学、表观基因组学和代谢组学。所有这些主题都在单独的 div 中进行了解释。我们的页面现在真的很长，我们希望在页面以 htese divs 隐藏开头时有一个功能，然后您可以单击这些单词中的任何一个并打开相应的 div，如果单击这些词中的另一个，然后原始 div 将关闭，新的将打开。我们中 None 的人在 javascript 方面有任何经验，但似乎无法弄清楚如何做到这一点。如果有人能帮助我们，那就太好了。

Answer 1

这是一个快速解决方法。我相信您可以自己复制 HTML 中的其他主题。

const links = [...document.getElementsByTagName("a")];
const topics = [...document.getElementsByClassName("topic")];
links.map((link) => link.addEventListener("click", function() {
  topics.map((topic) => topic.style.display = "none");
  const selected = link.text;
  document.getElementById(selected).style.display = "inline-block";
}));

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

a {
  text-decoration: none;
  color: black;
}

nav ul {
  list-style: none;
  padding: 20px;
  display: flex;
  align-content: center;
  justify-content: space-between;
  background-color: lightblue;
  font-size: 1.4rem;
}

.topic {
  display: none;
}

<div class="page">
  <nav>
    <ul>
      <li><a href="#">systeembiologie</a></li>
      <li><a href="#">proteomics</a></li>
      <li><a href="#">genomics</a></li>
      <li><a href="#">transcriptomics</a></li>
      <li><a href="#">epigenomics</a></li>
      <li><a href="#">metabolomics</a></li>
    </ul>
  </nav>
  <div id="systeembiologie" class="topic">
    <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div id="proteomics" class="topic">
    <div class="description">Viverra orci sagittis eu volutpat. Tellus in metus vulputate eu scelerisque felis. Tristique et egestas quis ipsum suspendisse ultrices. Vitae semper quis lectus nulla at volutpat. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Urna condimentum mattis pellentesque id nibh. Ac tortor vitae purus faucibus ornare suspendisse. Gravida arcu ac tortor dignissim convallis. Platea dictumst vestibulum rhoncus est. Viverra maecenas accumsan lacus vel facilisis volutpat est velit egestas. Ultrices in iaculis nunc sed augue lacus.</div>
  </div>
</div>

如何 show/hide 复数 div 与 javascript？

How to show/hide plural divs with javascript?

html

javascript

css

show

hide