Как добавить класс одному элементу и убрать его у остальных?

Question

[Undefined User]

<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>

Мне нужно, чтобы при нажатии на какой-то из элементов к нему добавлялся класс is-active, а у остальных он удалялся.

Comments

[Gimir]

Сохраняй активный элемент, при нажатии, снимай класс с активного и записывай в активный тот на который ты нажал и добавляй ему класс.

Answer 1

[Aldadis]

Попробуйте так

$('#side__nav li').click(function() {
        $(this).addClass('is-active').siblings().removeClass('is-active');
    });

Answer 2

[0xD34F]

Где элементы находятся, что за элементы, какой класс надо им переключать:

const container = document.querySelector('.side__nav');
const itemSelector = 'li';
const activeClass = 'is-active';

Переключаем:

container.addEventListener('click', function(e) {
  const item = e.target.closest(itemSelector);
  if (item) {
    this.querySelector(`${itemSelector}.${activeClass}`)?.classList.remove(activeClass);
    item.classList.add(activeClass);
  }
});

или

const items = container.querySelectorAll(itemSelector);
const onClick = e => items.forEach(n => n.classList.toggle(activeClass, n === e.currentTarget));
items.forEach(n => n.addEventListener('click', onClick));