Question

I’m trying to figure out how to highlight the current navigation icon on my site. It’s made more complex as apart from the blog section, all other nav links go to different sections on the same page. I want the home icon to be highlighted in all instances unless the user is on my blog section. I have used CSS to set opacity of the icon to 0.5, and to highlight the icon a class is added using JQuery the changes opacity to 1. I’m almost there, however when the user goes to my blog section and then back to home section, the icon doesn’t highlight (unless I refresh browser). Here is my 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');
    }); 

Thank you!

EDIT: Sorry! Here is my site http://www.jonhudsonweb.com

EDIT: Figured it out!! But I’m not allowed to answer my question yet as I’m not good enough 🙁

Here’s my solution:

 // 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 for me!

Yay.

Answer 1

My solution:

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