在點擊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'); 
     } 
    }); 
});