Question

我遇到了一个想要为当前点击的菜单项添加活动链接的问题。

解决方案是添加：

$("a").click(function(){
    $("a").removeClass("active");
    $(this).addClass("active");
});

现在，如果我们第二次点击活动链接，我们如何删除活动类？我猜我们需要使用toggleClass（），但我无法使它工作。请注意，一次只有一个链接应具有活动类。

以下是演示：http://jsfiddle.net/A6dqQ/

Answer 1

你可以这样做：

$('a').click(function(e){
  e.preventDefault();
  var $a = $(this);
  $a.toggleClass('active').siblings().removeClass('active');
});

Answer 2

然后使用toggleClass()：

$(this).toggleClass("active");

代码：

$("a").click(function(){
    $(this).toggleClass("active");
    $("a").not(this).removeClass("active");

});

FIDDLE DEMO

Answer 3

检查当前链接是否为active，然后根据该链接添加/删除active class，试试这个：

$("a").click(function(){
    var $this = $(this);
    var isActive = $this.hasClass('active');
    $("a").removeClass("active");
    isActive ? $this.removeClass("active") : $this.addClass("active");
});

jsFiddle

Answer 4

这里有一个简单的答案：

$("a").on("click", function() {
$("a").removeClass("active");
$(this).addClass("active");
});

$("nav").on("mouseleave", function() {
$("nav").find("a").removeClass("active");   
});

这样做，当您的鼠标离开nav时，它会自动删除active上的a课程。这里有DEMO

Answer 5

这样的东西？

$("a").click(function () {
    var $this = $(this);
    if ($this.hasClass("active")) {
        $this.removeClass("active");
    } else {
        $("a").removeClass("active");
        $this.addClass("active");
    }
});

Fiddle

如果再次单击活动链接，则删除活动类？

5 个答案: