Как отобразить элемент при нажатии на другой элемент?

Question

[Undefined User]

<div class="home__block" id="home__block"></div>
<div class="works__block" id="works__block"></div>
<div class="about__block" id="about__block"></div>
<div class="contact__block" id="contact__block"></div>
<div class="hire__block" id="hire__block"></div>

<nav class="i__side__nav">
            <div class="side__nav__line"></div>
            <ul class="side__nav" id="side__nav">
              <li class="home__item" id="item1">Home</li>
              <li class="works__item" id="item2">Works</li>
              <li class="about__item" id="item3">About</li>
              <li class="contact__item" id="item4">Contact</li>
              <li class="hire__item" id="item5">Hire us</li>
            </ul>
          </nav>

Мне нужно, чтобы при нажатии на li показывался определенный блок(например: при нажатии на home__item должен показываться home__block). Как это правильно сделать?

Answer 1

[0xD34F]

Классы - вырезаете приставки вида "xxx__", чтобы остались только "block" и "item".

Затем добавляете стили:

.block {
  display: none;
}

.block.active {
  display: block;
}

И код:

document.querySelector('.side__nav').addEventListener('click', e => {
  const item = e.target.closest('.item');
  if (item) {
    const index = [...e.currentTarget.children].indexOf(item);
    document.querySelectorAll('.block').forEach((n, i) => n.classList.toggle('active', i === index));
  }
});

Comments

[Undefined User]

Спасибо