2

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

耶。

4

2 回答 2

1

乔恩，你的解决方案对我来说有点尴尬。为什么不.active给你想要持续活跃的图标添加一个类，并用 CSS 设置样式呢？

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

于 2012-09-27T08:57:16.783 回答
0

我的解决方案：

// 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');
        });
于 2012-09-27T08:42:20.480 回答