在点击jquery上向元素添加特定的类

Question

我在使用简单的导航栏时遇到麻烦，该导航栏在某些页面处于活动状态时使用jQuery添加和删除特定的类。 我希望根据单击的ID将一个类追加到我的aLink类中。 如果单击#aboutLink .linkActive添加.linkActive ，但是如果单击#sasLink .link2Active添加.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

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

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

JS小提琴演示 。

您可以改为使用toggleClass()允许通过再次单击删除这些类：

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

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

JS小提琴演示 。

根据OP的问题进行编辑 ，评论如下：

我将如何删除该类，以使两个链接不会同时处于活动状态？

有几种方法，但是由于要添加不同的类名来表示“活动”状态，因此它们效率低下。 第一种方法是使用蛮力方法，有效地查找所有具有class属性a元素并将该属性设置为空字符串， 然后将linkActive / link2Active类名添加到所单击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小提琴演示 。

另一种方法是从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小提琴演示 。

当然，如果您使用通用的类名，那么一切将变得容易得多：

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

JS小提琴演示 。

参考文献：

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

Answer 2

既然您已经具有ID标记以方便参考...我想您想要更多类似的东西吗？

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

Answer 3

尝试使用此代替：

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