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

Question

function activateMenuItem(this) {
  this.classList.remove('active')
}

function activateMenuItem(liElement) {
  liElement.classList.toggle('active');
}

.menu-item {
  cursor: pointer;
}

.active {
  background-color: yellow;
}

<ul id="menu">
  <li class="menu-item" onclick="activateMenuItem(this)">Главная</li>
  <li class="menu-item" onclick="activateMenuItem(this)">О нас</li>
  <li class="menu-item active" onclick="activateMenuItem(this)">Услуги</li>
  <li class="menu-item" onclick="activateMenuItem(this)">Контакты</li>
</ul>

Answer 1

const menuItem = document.querySelectorAll('.menu-item');
//надо пока элементы прокрутить в цикле чтобы их получить

menuItem.forEach(s => s.addEventListener('click', () => {
  // тут получаеться два цикла во-втором мы удаляем класс
  menuItem.forEach(s => s.classList.remove('active'))
  // а тут добавляем класс
  s.classList.add('active')
}))

.menu-item {
  cursor: pointer;
}

.active {
  background-color: yellow;
}

<ul id="menu">
  <li class="menu-item">Главная</li>
  <li class="menu-item">О нас</li>
  <li class="menu-item">Услуги</li>
  <li class="menu-item">Контакты</li>
</ul>

Answer 2

Получить все элементы, пробежаться по ним и кроме текущего удалить у всех класс. Это если для конкретной поставленной задачи. Но возможно потребуются доработки для дополнительных уровней вложенностей(наличии внутренних ссылок) и если текущий, независимо от прошлого состояния, должен быть выделен( не первый клик и он уже не выделен).

Решение дано для задачи "убрать классы у всех элементов, кроме того по которому кликаю", если подразумевалась популярная задача "убрать-добавить активный элемент в списке" - то больше подойдут другие представленные варианты.

const menu = document.querySelector('#menu');
menu.addEventListener('click', e => {
  menu.querySelectorAll('.menu-item').forEach(item => {
    if (item !== e.target) {
      item.classList.remove('active');
    }
  });
  //item.classList.addClass('active');
});

.menu - item {
  cursor: pointer;
}

.active {
  background-color: yellow;
}

<ul id="menu">
  <li class="menu-item active">Главная</li>
  <li class="menu-item active">О нас</li>
  <li class="menu-item active">Услуги</li>
  <li class="menu-item active">Контакты</li>
</ul>

Решение для "добавление-удаления" активного элемента навигации - без перебора всего списка.

const menu = document.querySelector('#menu');
menu.addEventListener('click', e => {
  if(e.target.classList.contains('active')) return;
  e.currentTarget.querySelector('.active').classList.remove('active');
  e.target.classList.add('active');
});

.menu-item {
  cursor: pointer;
}

.active {
  background-color: yellow;
}

<ul id="menu">
  <li class="menu-item active">Главная</li>
  <li class="menu-item">О нас</li>
  <li class="menu-item">Услуги</li>
  <li class="menu-item">Контакты</li>
</ul>

Answer 3

function activateMenuItem(element) {
    // Получаем все пункты меню
    let menuItems = document.getElementsByClassName("menu-item");

    // Проходимся по каждому пункту меню
    for(let i = 0; i < menuItems.length; i++) {
        // Удаляем класс "active" у всех пунктов
        menuItems[i].classList.remove("active");
    }

    // Добавляем класс "active" к пункту меню, по которому было произведено нажатие
    element.classList.add("active");
}

.menu-item {
    cursor: pointer;
}
.active {
    background-color: yellow;
}

<ul id="menu">
    <li class="menu-item" onclick="activateMenuItem(this)">Главная</li>
    <li class="menu-item" onclick="activateMenuItem(this)">О нас</li>
    <li class="menu-item" onclick="activateMenuItem(this)">Услуги</li>
    <li class="menu-item" onclick="activateMenuItem(this)">Контакты</li>
</ul>

Answer 4

Представленный ниже скрипт может работать с любым количеством списков и пунктов в них, а также поддерживает вложенность и правильно работает при нажатии на возможные дочерние элементы в пунктах:

document.querySelectorAll('.menu').forEach((menu) => {menu.addEventListener('click', fSelect)});

function fSelect(ev) {
  let target = ev.target.closest('.menu-item:not(:has(> ul))');
  if (!target) return;
  this.querySelectorAll('.menu-item').forEach((item) => {
    item.classList.toggle('active', item === target);
  });
}

body { display: flex; }
.menu-item { cursor: pointer; }
.menu-item span { color: violet; }
.active { background-color: yellow; }

<ul class="menu">
  <li class="menu-item">Главная <span>страница</span></li>
  <li class="menu-item">О нас</li>
  <li class="menu-item">Услуги</li>
  <li class="menu-item">
    <ul>
      <li class="menu-item">Главная <span>страница</span></li>
      <li class="menu-item">О нас</li>
      <li class="menu-item">
        <ul>
          <li class="menu-item">Главная <span>страница</span></li>
          <li class="menu-item">
            <ul>
              <li class="menu-item">Главная <span>страница</span></li>
              <li class="menu-item">О нас</li>
              <li class="menu-item">Услуги</li>
              <li class="menu-item">Контакты</li>
            </ul>
          </li>
          <li class="menu-item">Услуги</li>
          <li class="menu-item">Контакты</li>
        </ul>
      </li>
      <li class="menu-item">Контакты</li>
    </ul>
  </li>
</ul>
<ul class="menu">
  <li class="menu-item">Главная <span>страница</span></li>
  <li class="menu-item">О нас</li>
  <li class="menu-item">Услуги</li>
  <li class="menu-item">
    <ul>
      <li class="menu-item">Главная <span>страница</span></li>
      <li class="menu-item">О нас</li>
      <li class="menu-item">
        <ul>
          <li class="menu-item">Главная <span>страница</span></li>
          <li class="menu-item">
            <ul>
              <li class="menu-item">Главная <span>страница</span></li>
              <li class="menu-item">О нас</li>
              <li class="menu-item">Услуги</li>
              <li class="menu-item">Контакты</li>
            </ul>
          </li>
          <li class="menu-item">Услуги</li>
          <li class="menu-item">Контакты</li>
        </ul>
      </li>
      <li class="menu-item">Контакты</li>
    </ul>
  </li>
</ul>

БЛОГ НА HUSL

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

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