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

Question

我试图弄清楚如何突出显示网站上的当前导航图标。 除了博客部分之外，它变得更加复杂，所有其他导航链接都转到同一页面上的不同部分。 我希望主页图标在所有情况下都突出显示，除非用户在我的博客部分中。 我使用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');
    }); 

谢谢！

编辑：对不起！ 这是我的网站http://www.jonhudsonweb.com

编辑：想通了！ 但是由于我不够好，所以我还不能回答我的问题:(

这是我的解决方案：

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

为我+1！

好极了。

Answer 1

乔恩，您的解决方案对我来说有点尴尬。 为什么不向要一直显示为活动状态的图标添加.active类，并使用CSS对其进行样式设置？

此外，您应该真正使用一个将所有导航图标结合在一起的类，并为您的.hover()方法引用该类，而不是列出每个ID。 巧合的是，我在网站上也做同样的事情。

Answer 2

我的解决方案：

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