如何使用javascript显示/隐藏多个div？

Question

我和我的同事正在做一个项目，我们制作一个网站来向人们展示我们的研究。 我们有 1 页，其中包含有关某些主题的许多描述。 共有 6 个。 系统生物学、蛋白质组学、基因组学、转录组学、表观基因组学和代谢组学。 所有这些主题都在单独的 div 中进行了解释。 我们的页面现在真的很长，我们希望有一个功能，当页面开始时隐藏htese div，然后您可以单击这些单词中的任何一个并打开相应的div，如果单击这些单词中的另一个则是原始的div 将关闭，新的将打开。 我们中没有人在 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>