jQuery程序不工作

Question

我在使用jQuery时遇到了一个问题，仅仅是因为我没有使用它的经验。我的程序是为了给CSS类current链接在我的导航栏，如果他们被点击，并从它的前所有者删除类。

请记住，我在javascript方面非常缺乏经验，只是为了学校的作业而在几分钟内拿起它。脚本根本不做任何事情。

我的代码:

$(document).ready(function() {
    $('a').click( function(i){
        var $current = $('a.current');
        $(this).addClass('current');
        $current.removeClass('current');
    });
});

编辑1:奇怪的bug，如果我不点击链接，而是点击文档，当前类将应用于整个文档。

Answer 1

您应该首先删除class，然后添加它。否则，如果两次输入click和anchor，则不会添加class。

$(function() {
    $('a').click(function() {
        $('a.current').removeClass('current');
        $(this).addClass('current');
    });
});

Answer 2

试试这个:

$current.removeClass('current');
$(this).addClass('current');

您需要首先移除活动类，然后为当前元素添加当前类。

Answer 3

你需要缩小你的代码，只影响导航栏中的链接，因为目前，你的目标是所有的<a>标签。

var navLink = $('.nav a');
navLink.on('click', function(e){
    navLink.removeClass('current');
    $(this).addClass('current');
});

在这段代码中，变量获取所有导航链接的实例，如果其中一个被单击，将从所有链接中删除当前类，然后将其添加到被单击的链接中。

下面这个示例将向您展示它的实际操作:https://jsfiddle.net/td48vcqy/