如何使用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>