JQuery Navigation set Class

Question

我想在没有加载页面的情况下加载我的导航。一切正常。但导航元素<li> nav </li>应该得到一个具有另一种风格的类......“活跃”。我尝试了这个，但是没有用，你可以看到我的page发生了什么 代码：

            $('#content').children('section').not('#home').hide();
            $(".a").hasClass('navigation-element').parent().removeClass('active');
            $(".a").click(function(e){
                e.preventDefault();

                if ($(this).hasClass('navigation-element')){
                    var $target = $('#' + $(this).attr('href')).stop(true, true);
                    var $secs = $('#content > section').not($target).stop(true,   true).filter(':visible');
                    if ($secs.length) {
                        $secs.fadeOut(function () {
                            $target.fadeIn();
                            $(this).parent().addClass('active');
                        });
                    } else {
                        $target.fadeIn();
                    }
                } else if ($(this).hasClass('hide')){
                    $(this).parent().fadeOut();
                }
            });

错误在第2行和第12行。

Answer 1

第2行：hasClass返回一个布尔值，你需要使用类过滤器

第12行：这里this没有引用点击的li元素，你需要使用一个闭包变量来引用被点击的元素

//initial setup
$('#content').children('section').not('#home').hide();
$('.active:has(a.anavigation-element)').removeClass('active');
$('.navigation-element[href="home"]').parent().addClass('active');

$('.navigation-element').click(function (e) {
    var $this = $(this);
    e.preventDefault();

    var $target = $('#' + $(this).attr('href')).stop(true, true);
    var $secs = $('#content > section').not($target).stop(true, true).filter(':visible');

    if ($secs.length) {
        //remove existing active from the prev element
        $('.active:has(a.navigation-element)').removeClass('active');
        $secs.fadeOut(function () {
            $target.fadeIn();
            $this.parent().addClass('active');
        });
    } else {
        $target.fadeIn();
        $this.parent().addClass('active');
    }
});