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。巧合的是，我在my site做了同样的事情。

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

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

2 个答案: