0

我在使用 jQuery 在某个页面处于活动状态时添加和删除特定类的简单导航栏时遇到问题。我希望根据单击的 ID 将一个类附加到我的 aLink 类。如果我点击#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');
         });
     });

感谢您的任何意见或方向。

4

3 回答 3

4 
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 的问题进行了编辑，在评论中如下：

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

有几种方法，但是因为您要添加不同的类名来表示“活动”状态，所以它们的效率有点低。第一种方法是使用蛮力方法，有效地查找所有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 小提琴演示。

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

$('#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 小提琴演示。

参考：

于 2013-07-23T22:41:33.040 回答
1

既然您已经有 ID 标签可以轻松参考...我想您想要更多类似的东西？

$(function () {
    $("#aboutLink").click(function () {
            $(this).addClass('activeLink');
    });
    $("#sasLink").click(function () {
            $(this).addClass('active2Link');
    });
});
于 2013-07-23T22:40:40.743 回答
0

尝试改用这个：

$(function () {
    $(".aLink").click(function () {
        var currentId = this.id;
        if ( currentId == "aboutLink"){
            $(this).addClass('activeLink');
         else if( currentId == "sasLink") {
             $(this).addClass('active2Link');
         }
     });
 });
于 2013-07-23T22:45:00.790 回答