Как правильно сделать отображение пунктов меню?

Question

[Denis R]

как правильно сделать отображение такого меню
Вверху отображаться активный пункт нижнего меню
В нижнем меню этот пункт нужно скрыть
___
те если пункт case3 нажат внизу он скрывается из нижнего меню и отображается вверху просто текстом case3, при нажатии на case2 в нижнем меню, внизу скрывается он, все другие отображаются, и отображается вверху тоже просто текстом case2

<div class="visible_menu">
  <p> Активный пункт меню </p>
  <!-- <p> Неактивный пункт</p> -->
  <!-- <p> Неактивный пункт</p> -->
  <!-- <p> Неактивный пункт</p> -->
</div>
<div>
  Отображаемый контент кейсов
</div>
<div class="tabs__links">
  <a href="#case1" class="tab-case">
    <p>case1</p>
  </a>
  <a href="#case2" class="tab-case">
    <p>case2</p>
  </a>
  <a href="#case3" class="tab-case">
    <p>case3</p>
  </a>
  <a href="#case4" class="tab-case">
    <p>case4</p>
  </a>
</div>

Answer 1

[0xD34F]

const active = document.querySelector('.visible_menu');
const linksContainer = document.querySelector('.tabs__links');
const linkSelector = '.tab-case';

Вариант раз - обработчик клика делегированный; запоминаем предыдущий выбранный элемент; копируем разметку:

let oldActive = null;

linksContainer.addEventListener('click', e => {
  const newActive = e.target.closest(linkSelector);
  if (newActive) {
    active.innerHTML = newActive.innerHTML;
    oldActive && (oldActive.style.display = '');
    (oldActive = newActive).style.display = 'none';
  }
});

Вариант два - обработчик клика подключаем к каждому из пунктов меню; для переключения видимости перебираем всех; вырезаем-копируем-вставляем DOM-узлы:

.hidden {
  display: none;
}

const links = linksContainer.querySelectorAll(linkSelector);

links.forEach(function(n) {
  n.addEventListener('click', this);
}, function() {
  for (let n; n = active.lastChild; n.remove()) ;
  active.append(...this.cloneNode(true).childNodes);
  links.forEach(n => n.classList.toggle('hidden', n === this));
});

Comments

[Denis R]

Моя задача слегка изменилась
если в ссылке нижнего меню есть пункт и подпункт
что нужно дописать, чтоб сверху они отображались тоже так
например как h3 и p

[0xD34F]

Ну так вместо текста надо разметку перезаписывать. Или копировать узлы. Неужели сами не догадались? Ответ обновил.