在点击jQuery添加特定的类到元素

Question

我遇到了一个简单的导航栏，当某个页面处于活动状态时，使用jQuery添加和删除特定的类时出现问题。我想要一个类添加到我的aLink类，具体取决于哪个ID被点击。如果我点击#aboutLink我想要添加.linkActive，但是如果我点击#sasLink我想要添加.link2Active。我看过的教程都添加了一个类，但是因为我的两个类都不同，所以我需要添加一个特定的类，具体取决于哪个ID被点击。

HTML：

<div id="mainNav"> 
    <ul id="nav"> 
     <a id="mainLogo" href="/"><li></li></a> 
     <a id="aboutLink" class="aLink" href="/"><li></li></a> 
     <a id="sasLink" class="aLink" href="/savings-and-support"><li></li></a> 
     <a id="external" href="/"><li></li></a> 
    </ul> 
</div><!--/#mainNav--> 

我知道我的jQuery的是没有意义的，但它是所有我能想出。从逻辑上讲，我明白了，但是我迷失在语法上。

的jQuery：

$(function() { 
    $(".aLink").click(function() { 
     if ($(this) == $("#aboutLink") 
      $(this).addClass('activeLink'); 
     else $(this).addClass('active2Link'); 
     }); 
    }); 

感谢您的任何输入或方向。

Answer 1

既然你已经有ID标签来轻松引用......我想你想要更类似这样的东西？

$(function() { 
    $("#aboutLink").click(function() { 
      $(this).addClass('activeLink'); 
    }); 
    $("#sasLink").click(function() { 
      $(this).addClass('active2Link'); 
    }); 
}); 

Answer 2

var idToClass = { 
    'aboutLink' : 'linkActive', 
    'sasLink' : 'link2Active' 
} 

$('#nav a').click(function(){ 
    e.preventDefault(); 
    $(this).addClass(idToClass[this.id]); 
}); 

JS Fiddle demo。

你可以，而是使用toggleClass()允许由第二点击移除这些类：

var idToClass = { 
    'aboutLink' : 'linkActive', 
    'sasLink' : 'link2Active' 
} 

$('#nav a').click(function(e){ 
    e.preventDefault(); 
    $(this).toggleClass(idToClass[this.id]); 
}); 

JS Fiddle demo。

编辑响应质疑，从OP，在注释中，如下：

我如何会删除类，这样既链接不会出现是活跃在同一时间？

有几种方法，但是因为您添加了不同的类名来表示“活动”状态，所以它们有点低效。第一种方法是使用穷举法，有效地寻找一个有class属性，设置该属性为空字符串，并然后加入linkActive/link2Active类名被点击的a所有a元素元件：

$('#nav a').click(function(e){ 
    e.preventDefault(); 
    var self = $(this); 
    self.closest('ul').find('a[class]').attr('class', ''); 
    self.toggleClass(idToClass[this.id]); 
}); 

JS Fiddle demo。

另一种方法是从idToClass对象中列出的其id元素中移除特定的类。这是，然而，在有些昂贵它需要遍历对象，检索id，与该id和然后除去class -name找到元件：

$('#nav a').click(function(e){ 
    e.preventDefault(); 
    for (var id in idToClass) { 
     if (idToClass.hasOwnProperty(id)){ 
      $('#' + id).removeClass(idToClass[id]); 
     } 
    } 
    $(this).addClass(idToClass[this.id]); 
}); 

JS Fiddle demo。

如果，当然，你可以使用一个共同的类名，然后这一切变得更加容易：

$('#nav a').click(function (e) { 
    e.preventDefault(); 
    var self = $(this); 
    self.closest('ul') 
     .find('.commonActiveClassName') 
     .removeClass('commonActiveClassName'); 
    self.addClass('commonActiveClassName'); 
}); 

JS Fiddle demo。

参考文献：

• addClass()。
• closest()。
• event.preventDefault()。
• find()。
• removeClass()。
• toggleClass()。

Answer 3

尝试使用这个：

$(function() { 
    $(".aLink").click(function() { 
     var currentId = this.id; 
     if (currentId == "aboutLink"){ 
      $(this).addClass('activeLink'); 
     else if(currentId == "sasLink") { 
      $(this).addClass('active2Link'); 
     } 
    }); 
});