Как сделать, чтобы только один элемент имел класс?

Question

[DeniSidorenko]

Есть такая структура:

<ul>
<li> text1</li>
<li> text2</li>
<li> text3</li>
<li> text4</li>
<li> text5</li>
<li> text6</li>
</ul>

Сделал, чтобы при клике на li добавлялся класс active, который имеет свои стили. Однако, мне надо примерно такой функционал: кликнул по первому элементу, добавил класс active, кликнул по 5 элементу, 5 элемент получает class active, а у первого убирается. Короче, одновременно только один li может иметь класс active.

Comments

[Станислав]

И где код?

[DeniSidorenko]

Станислав:

$('.ads-category__link').on('click',function(){
	$(this).addClass('active');
});

[Ankhena]

DeniSidorenko: Значит при клике сначала у всех li надо убрать класс, потом добавить нужный.

[Станислав]

DeniSidorenko: добавил ответ к вашему вопросу.

Answer 1

[Виктор Янышев]

$(document).on('click', 'li', function() {
  $('li').each(function(idx, elem) {
    if($(elem).has('active')) {
      $(elem).removeClass('active');
    }
  });
  $(this).addClass('active');
});

Comments

[DeniSidorenko]

Спасибо

[Сергей delphinpro]

Так не проще?

$('li.active').removeClass('active');
$(this).addClass('active');

Или так

$(this).addClass('active')
  .siblings().removeClass('active');

Зачем лишние циклы городить?

Answer 2

[Станислав]

Самый удобочитаемый и короткий способ - сделать вот так:

$('.ads-category__link').on('click',function(){
  $(this).toggleClass('active');
});

Как несложно догадаться, метод toggleClass() не просто добавляет или удаляет указанный ему класс или классы, а "переключает" их, убирая, если они уже есть, или добавляя, если их еще нет.

Answer 3

[Павел Корнилов]

<ul id=menu>
<li> text1</li>
<li> text2</li>
<li> text3</li>
<li> text4</li>
<li> text5</li>
<li> text6</li>
</ul>

<script>
var menu= document.getElementById('menu');
menu.onclick= function(e) {
	[].forEach.call(menu.querySelectorAll('li'), function(i) {
		i.classList.remove('active');
	});
	e.target.classList.add('active');
	console.log(e.target);
}

</script>