Как по клику на «li» добавлять ему класс?

Question

[Kolya Vantukh]

Есть разметка

<ul class="dropdown-menu" role="menu">
        <li class="vloading active"><a href="#">50</a></li>
        <li class="vloading "><a href="#">100</a></li>
        <li class="vloading "><a href="#">200</a></li>
    </ul>

Нужно , чтобы при клике на соответствующий елемент списка добавлялся к нему класс active . Как это сделать?

Answer 1

[Дмитрий]

На

Comments

[Kolya Vantukh]

спасибо

[Kolya Vantukh]

а как сделать , чтобы после перезагрузки страницы класс не менялся ?

[Дмитрий]

Kolya Vantukh: работать с localStorage :) Или куки, или чтот другое.. Тут мои знания пока что не развиты :)

Answer 2

[Michael]

Если Вам к тому же надо сбрасывать active класс с других элементов по клику, а также используется jQuery на проекте, то:

var $els = $('.vloading'); // кэшируем ссылку на объекты
$els.on('click', function() {
   $els.removeClass('active');
   $(this).addClass('active');
})

Comments

[Stalker_RED]

тогда уж так: https://jsfiddle.net/bd10uzat/4/
- один обработчик на все элементы
- кэширование не нужно

[Kolya Vantukh]

а как сделать , чтобы после перезагрузки страницы класс не менялся ?

[Stalker_RED]

Kolya Vantukh: сохранять текущее состояние куда-нибудь. Например в localstorage

[Stalker_RED]

Kolya Vantukh: ну и при загрузке страницы проверять есть ли сохраненное состояние, и подсвечивать нужный элемент.

Answer 3

[Златослав Десятников]

Лучше вешать обработчик на родительский элемент или документ, а не на все элементы списка, потому что так будет один обработчик, а не столько, сколько элементов списка (это ещё не считая того, что они могут быть добавлены динамически и обработчика на новом элементе не будет, если сделать $('li').on(...)).

Вот набросал на JSFiddle.

$(document).on('click', '.dropdown-menu li', function(e) {
	var $li = $(this);
  $li.siblings(".active").removeClass('active');
  $li.addClass('active');
});

Comments

[Kolya Vantukh]

а как сделать , чтобы после перезагрузки страницы класс не менялся ?

[Златослав Десятников]

Kolya Vantukh: ну, это уже совсем не по теме вопроса. Надо отдавать как-то с сервера.

Answer 4

[StiPAFk]

$(твоя ли).click(function(){
$(this).removeClass('нужный класс'); //удалить
$(this).addClass('нужный класс');// добавить
})

Comments

[Михаил]

Привет, выйди пожалуйста на связь, очень нужен совет. Моя телега @moonZlo

Answer 5

[denny911]

$('.vloading').click(function(){
$('.vloading').removeClass('active');
$(this).toggleClass('active');
});