Динамически отображать div из навигации

Эта статья покажет вам, как изменить раздел вашего веб-сайта в зависимости от элемента, выбранного в меню навигации. Мы напишем код для отображения div с тем же именем, что и выбранный пункт меню.

Вот пример использования JavaScript и HTML:

HTML:

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</nav>

<div id="home">This is the Home section</div>
<div id="about">This is the About section</div>
<div id="services">This is the Services section</div>
<div id="contact">This is the Contact section</div>

JavaScript:

const navLinks = document.querySelectorAll("nav a");
const divs = document.querySelectorAll("div");

navLinks.forEach(link => {
  link.addEventListener("click", e => {
    e.preventDefault();
    const targetDiv = link.getAttribute("href").substring(1);
    divs.forEach(div => {
      if (div.id === targetDiv) {
        div.style.display = "block";
      } else {
        div.style.display = "none";
      }
    });
  });
});

Этот код сначала выбирает все ссылки в элементе nav и во всех элементах div на странице, а затем настраивает прослушиватель событий для каждой ссылки, чтобы отображать соответствующий div при нажатии на ссылку. Метод substring(1) используется для извлечения значения атрибута href без символа #.

Каждый div по-прежнему виден все время, в чем может быть причина?

Причина в том, что для свойства display установлено значение «блокировать» для всех div при загрузке страницы, и оно не сбрасывается на «none» для всех, кроме целевого div.

Чтобы скрыть все элементы div при загрузке страницы, добавьте этот код перед прослушивателем событий:

divs.forEach(div => {
  div.style.display = "none";
});

Чтобы блок «Home» был виден по умолчанию, а все остальные — нет, добавьте следующий код:

document.getElementById("home").style.display = "block";

Таким образом, полный код будет выглядеть так:

const navLinks = document.querySelectorAll("nav a");
const divs = document.querySelectorAll("div");

divs.forEach(div => {
  div.style.display = "none";
});
document.getElementById("home").style.display = "block";
navLinks.forEach(link => {
  link.addEventListener("click", e => {
    e.preventDefault();
    const targetDiv = link.getAttribute("href").substring(1);
    divs.forEach(div => {
      if (div.id === targetDiv) {
        div.style.display = "block";
      } else {
        div.style.display = "none";
      }
    });
  });
});