Проблема с добавлением css класса

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

Всем привет.

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

Проблема в том, что при первом нажатии css класс не удаляется и не прибавляется к другому пункту в меню, только при втором нажатии.

Вот сам javascript:

$("#navigation li a").each(function(i, e) {
    $navEl = $(e);
    // console.log($navEl);
    $navEl.click(function(ev) {
        $this = $(this);
        $this.parent().siblings().children("a").removeClass("navActive");
        $this.addClass("navActive");
    });
});
css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 4Принят

Вы перемудрили, навесьте на все ссылки класс, скажем: js-link и сделайте так:

var $links = $('.js-link');

$links.click(function(e){
    var $this = $(this);
    var thisActive = $this.hasClass('active');
    if (thisActive) { return false; }
    $links.removeClass('active');
    $this.addClass('active');
});

Вот вам демка: http://jsfiddle.net/ps34Lfg8/

Ваши основные ошибки:

  • Вы проходите $.each все ваши ссылки, хотя можно создать массив объектов, и при навешивании событие, в данном случае click на массив, вешается на все элементы
  • Вы пытаетесь снять активный класс мутным перебором родительских элементов. У вас есть массив ссылок - так снимите со всех элементов, и тут же навесьте нужному ( который $(this) )