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

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，评论如下：

如何删除该类，以使两个链接同时不显示？

有几种方法，但是因为你添加了不同的类名来表示“活跃”状态，所以它们的效率有点低。第一种方法是使用强力方法，有效地查找具有a属性的所有class元素，并将该属性设置为空字符串，然后然后添加已点击的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 Fiddle demo

另一种方法是从id对象中列出idToClass的元素中删除特定类。然而，这有点昂贵，因为它需要遍历对象，检索id，找到元素<{1}}和然后删除id - 名称：

class

JS Fiddle demo

当然，如果你使用一个共同的类名，那么一切都变得容易了：

$('#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

参考文献：

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

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

3 个答案: