Как сделать переключение между пунктами меню

Question

У меня есть блок сверху окна со стилем z-index:1;. В нем 4 параграфа (<p>):

<p class="up1">Главная</p>
<p class="up1">Расписание</p>
<p class="up1">Записи</p>
<p class="up1">Помощь></p>

Также заготовлено 4 блока, первый со стилем display:block;, остальные 3 со стилем display:none; Мне необходимо сделать так, чтобы при нажатии на текст "Расписание", появлялся второй блок, а первый пропадал, и так далее. Я думаю это можно сделать при помощи изменения стиля display у первого и второго блоков, либо при помощи js

Answer 1

Кратко

const ps = [...document.querySelectorAll('p')]
for (let i = 0; i < ps.length; ++i) {
  const e = ps[i]
  e.addEventListener('click', () => {
    e.classList.remove('show')
    ps[i === ps.length - 1 ? 0 : i + 1].classList.add('show')
  })
}

p {
  display: none;
  padding: 1em;
  background-color: gainsboro;
}

p.show {
  display: block;
}

<p class="show">Главная</p>
<p>Расписание</p>
<p>Записи</p>
<p>Помощь</p>

БЛОГ НА HUSL

Как сделать переключение между пунктами меню

Ответы (1 шт):