试图用JQuery突出显示当前导航图标

我想知道如何在我的网站上突出显示当前的导航图标。它变得更加复杂，因为除了博客部分，所有其他导航链接都指向同一页面上的不同部分。我希望主图标在所有情况下都突出显示，除非用户在我的博客部分。我已经使用CSS将图标的不透明度设置为0.5，并且为了突出显示图标，使用JQuery添加了一个类，将不透明度更改为1。我就快到了，但是当用户转到我的博客部分，然后回到主页部分时，图标不会高亮显示（除非我刷新浏览器）。以下是我的JQuery：

 // change opacity of nav icons
    $('#nav-home, #nav-port, #nav-exp, #nav-cont, #nav-blog').hover(function(){
        $(this).fadeTo(200, 1);
        }, function(){
        $(this).fadeTo(200, 0.5);
    });

    // highlight current nav icon
    var queryString = location.search.replace('?','').split('=');

    $('#nav-blog').bind('load click', function(){
        if(queryString[1] == 'blog-home' || queryString[0] == 'article')
            $(this).addClass('nav-current');
        });

    $('#nav-home, #nav-port, #nav-exp, #nav-cont').bind('load click', function(){
        if(queryString[1] == 'home' || !queryString[1])
            $('#nav-home').addClass('nav-current');
    }); 

谢谢大家!

编辑：对不起！这是我的网站

编辑：算出了！！但我还不能回答我的问题，因为我不够好：(

以下是我的解决方案：

 // highlight current nav icon
        var queryString = location.search.replace('?','').split('=');

        $(window).bind('load unload', function(){
            if(queryString[1] == 'blog-home' || queryString[0] == 'article')
                $('#nav-blog').addClass('nav-current');
            });

        $(window).bind('load unload', function(){
            if(queryString[1] == 'home' || !queryString[1])
                $('#nav-home').addClass('nav-current');
        });

// highlight current nav icon
    var queryString = location.search.replace('?','').split('=');

    $(window).bind('load unload', function(){
        if(queryString[1] == 'blog-home' || queryString[0] == 'article')
            $('#nav-blog').addClass('nav-current');
        else 
            $('#nav-home').addClass('nav-current');
        });

+1给我

是的。

我的解决方案：

 // highlight current nav icon
        var queryString = location.search.replace('?','').split('=');

        $(window).bind('load unload', function(){
            if(queryString[1] == 'blog-home' || queryString[0] == 'article')
                $('#nav-blog').addClass('nav-current');
            });

        $(window).bind('load unload', function(){
            if(queryString[1] == 'home' || !queryString[1])
                $('#nav-home').addClass('nav-current');
        });

// highlight current nav icon
    var queryString = location.search.replace('?','').split('=');

    $(window).bind('load unload', function(){
        if(queryString[1] == 'blog-home' || queryString[0] == 'article')
            $('#nav-blog').addClass('nav-current');
        else 
            $('#nav-home').addClass('nav-current');
        });

---

Jon，你的解决方案在我看来有点笨拙。为什么不在图标中添加一个

.active

类来让它一直处于活动状态，并使用CSS来设置样式

---

此外，您应该真正使用一个统一所有导航图标的类，并为您的

.hover（）引用该类

方法，而不是列出每个ID。巧合的是，我正在做同样的事情。

奇怪的是，在“问题”中发布你的“答案”并不算是回答。请将答案作为答案发布，然后接受（我想你需要几天才能接受，但即使如此……），然后人们可以+1你的答案。你好，大卫，谢谢，是的，我本来试图回答我的问题，但我不被允许。显然我必须等8个小时！但我向你保证，我会在可能的时候正确回答我的问题。这将是我第一次被接受的答案！真的有点难过。你好，杰森，谢谢你的意见。我同意你的第二个建议，不能我相信我没有想到。但是你的第一个建议让我有点困惑。我想这就是我正在做的。我有一个css类叫做“nav current”，我正在使用JQuery将它应用到两个图标中的任何一个（主页或博客）我想表现得活跃。或者你是说别的什么？你是对的，这就是你正在做的，我本应该更清楚。我只是说，用PHP或其他什么做服务器端可能会稍微优雅一些。而且，非常感谢：）啊，我明白了。有意思，我没想到。谢谢