@enygf
Junior React Developer

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

<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). Как это правильно сделать?
  • Вопрос задан
  • 50 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Классы - вырезаете приставки вида "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));
  }
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы