Создание класса active у ссылок

Question

Создание класса active у ссылок

Рейтинг: -1Ответов: 1Опубликовано: 02.07.2023

У меня есть список ссылок в html, и мне нужно чтобы при клике на ссылку добавлять к ней класс active, но чтобы при клики на следующую ссылку класс active у предыдущей пропадал , таким образом класс active всегда был только у одной из ссылок.

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 1

У меня есть список ссылок в html, и мне нужно чтобы при клике на ссылку добавлять к ней класс active, но чтобы при клики на следующую ссылку класс active у предыдущей пропадал

Предложу такой вариант...

Вешаем обработчик на родителя и далее все действия выполняем относительно его.

const ou = document.querySelector('ul')
ou.addEventListener('click', e => {
  const o = e.target
  if (o.tagName != 'A') return
  e.preventDefault()
  ou.querySelector('.active')?.classList.remove('active')
  o.classList.add('active')
})

.active {
  color: red;
}

<ul>
  <li><a href='#'>Ссылка 1</a></li>
  <li><a href='#'>Ссылка 2</a></li>
  <li><a href='#'>Ссылка 3</a></li>
</ul>

Создание класса active у ссылок

Ответы