Как показать / скрыть множественное число дивов с помощью JavaScript? - PullRequest
Новая
       17

Как показать / скрыть множественное число дивов с помощью JavaScript?

0 голосов
/ 24 октября 2018

Я и мои коллеги работаем над проектом, где мы создаем веб-сайт, чтобы показать людям наше исследование.У нас есть 1 страница с множеством описаний по некоторым предметам.Всего их 6.системембиология, протеомика, геномика, транскриптомика, эпигеномика и метаболомика.Все эти предметы объясняются в отдельном div.Наша страница сейчас действительно длинная, и мы хотели бы иметь функцию, когда страница начинается со скрытых htese div, затем вы можете нажать на любое из этих слов, и откроется соответствующий div, если щелкнуть другое из этих слов, то оригиналdiv закроется, а новый откроется.Никто из нас не имеет никакого опыта в javascript и не может понять, как это сделать.Если бы кто-нибудь мог помочь нам, это было бы удивительно.

1 Ответ

0 голосов
/ 24 октября 2018

Вот быстрое решение.Я уверен, что вы сможете скопировать другие темы в 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>
...