addClass脚本不适用于nav元素

时间:2013-05-05 19:04:43

标签: javascript click addclass nav

我正在使用以下脚本将点击的“nav”元素类更改为导航栏中的“有效”类。

$('nav a').click(function(e) {
        e.preventDefault();
        $('nav a').removeClass('active');
        $(this).addClass('active');
    });

当它在我的jsFiddle中被隔离时它起作用:

http://jsfiddle.net/shockabout/ECshM/

但它不适用于我的开发网站:

https://dl.dropboxusercontent.com/u/102203801/HTML/index.html

我无法找到阻止“活动”类被应用的内容。我是否必须添加所有父类?

2 个答案:

答案 0 :(得分:0)

我刚刚将您的代码粘贴到主站点的控制台中,它完美无缺。我在页面上注意到你有一个装载机。在nav元素存在之前,你确定jQuery代码没有运行吗?

我认为正在发生的是,页面加载,DOM在技术上准备就绪,因此jQuery绑定click事件,但这些元素不存在,因为你有其他代码加载内容,所以jQuery没有实际上绑定任何东西。

尝试稍微改为

$("body").on("click", "nav a", function(e){
    e.preventDefault();
    $('nav a.active').removeClass('active');
    $(this).addClass('active');
});

然后它应该适合你

答案 1 :(得分:0)

我认为这是不行的,因为这里锚标签必须同时做两个任务 1.需要自己添加课程 2.需要将用户带到id为href of anchor tag

的div

你可以尝试这段代码。

它将绑定点击功能以激活锚标记,然后通过滚动效果将用户移动到新的div。

$('nav li a').click(function(e) {
        e.preventDefault();
        $('nav a').removeClass('active');
        $(this).addClass('active');
        var id=$(this).attr('href');
       scrollToId(id);
    });

    function scrollToId(id){
                $('html, body').animate({
                    scrollTop: $(id).offset().top
                     }, 2000);    
    }