Как выбрать элемент?

Как при клике на элемент из списка, добавить ему класс? При этом выбрать можно только 1 элемент

Ответ

Так как выбрать можно только один, то при клике есть текущий активный элемент и элемент по которому щелкнули. Нужно просто применить к ним toggleClass
$('li').on('click', function() { $('.active').add(this).toggleClass('active'); }); .active { background: red; }

• El1
• El2
• El3

Если не нужно убирать выбранный, нужно проверить, что у элемента по которому щелкнули нет класса active
$('li').on('click', function() { if (this.classList.contains('active')) return; $('.active').add(this).toggleClass('active'); }); .active { background: red; }

• El1
• El2
• El3

И последний вариант без использования jQuery
[].forEach.call(document.querySelectorAll('li'), function(li) { var active = document.getElementsByClassName('active'); li.addEventListener('click', function() { if (this === active[0]) this.classList.remove('active'); else { if (active[0]) active[0].classList.remove('active'); this.classList.add('active'); } }); }); .active { background: red; }

• El1
• El2
• El3

И без использования jQuery без возможности снять выделение со всех
[].forEach.call(document.querySelectorAll('li'), function(li) { var active = document.getElementsByClassName('active'); li.addEventListener('click', function() { if (active[0]) active[0].classList.remove('active'); this.classList.add('active'); }); }); .active { background: red; }

• El1
• El2
• El3