Добавить класс при клике по ссылке

Question

let active = document.querySelectorAll("a");

	active.forEach(function (entry) {
		entry.addEventListener("click", btnSelect);
	
		function btnSelect() {
			entry.classList.contains('selected')
			entry.classList.remove('selected')
			this.classList.add('selected');
		};
	});

.selected {
  color: blue;
  font-weight: 700;
}

<div class="links">
	<a>Link 1</a>
	<a>Link 2</a>
	<a>Link 2</a>
</div>

Не получается удалять классы при клике по другому элементу. Подскажите, что не так делаю?

Answer 1

const wrapObj = document.querySelector('.links');
wrapObj.onclick = function(e) {
  for (let i = 0; i < wrapObj.children.length; i++) {
    wrapObj.children[i].classList.remove('selected');
  }
  e.target.classList.add('selected');
}

.selected {
  color: blue;
  font-weight: 700;
}

<div class="links">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 2</a>
</div>

Answer 2

const links = document.querySelector('.links');

links.addEventListener('click', function(e) {
  const target = e.target;

  [...links.children].forEach(child => child.classList.remove('selected'));

  target.classList.add('selected');
});

.selected {
  color: red;
}

<div class="links">
  <a href="javascript:void(0);">Link 1</a>
  <a href="javascript:void(0);">Link 2</a>
  <a href="javascript:void(0);">Link 3</a>
</div>

БЛОГ НА HUSL

Добавить класс при клике по ссылке

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