CODEWITHSUNDEEP
jquery
Michael Harmon
Michael Harmon

Reputation: 43

Highlight Active Class in Navigation with jQuery

I have been trying multiple solutions for this, but I have not been able to get this to work.

I'm currently using a Coda-type slider to propagate the content on my website using the following navigation:

            <div class="navigation">
                <ul>
                    <li id="home"><a href="#home">Home</a></li>
                    <li id="work"><a href="#work-showcase">Work Showcase</a></li>
                    <li id="offerings"><a href="#brand-offerings">Offerings</a></li>
                    <li id="about"><a href="#about">About</a></li>
                    <li id="reason"><a href="#wow-factor">Reason to Believe</a></li>
                </ul>   
            </div>

I have a few pages on my website that fall outside of the slider content. I would like to be able to when on one of these "non-slider" pages -- to be able to click on one of the slider options at the top -- and have that content slide's navigation option highlighted with the .active or in my case ".there" class.

For example -- If I am on -- /packaged-brand-solutions.php (non-slider) and I click on: Work Showcase (/index.php#work-showcase) -- not only does that area of the slider load -- but its accompanying navigation option is highlighted.

Any help would be appreciated.

Upvotes: 0

Views: 504

Answers (1)

vzwick
vzwick

Reputation: 11064

If I got your question right, something along these lines should work for you:

$(window).bind('hashchange', function(){
    $('.there').removeClass('there'); // reset the previously active nav item
    $(document.location.hash).addClass('there');
});

This is assuming that your <li> needs to get the .there class. If you want the <a> to get it, use this instead:

$(window).bind('hashchange', function(){
    $('.there').removeClass('there'); // reset the previously active nav item
    $('a', document.location.hash).addClass('there');
});

Edit:

I just realized that your link's hashes don't necessarily match your <li> element IDs. Here's the appropriate solution for this scenario:

// assuming that you want the <a> to get the .there class
$(window).bind('hashchange', function(){
    $('.there').removeClass('there'); // reset the previously active nav item
    $('a[href="' + document.location.hash + '"]').addClass('there');
});

// assuming that you want the <li> to get the .there class
$(window).bind('hashchange', function(){
    $('.there').removeClass('there'); // reset the previously active nav item
    $('a[href="' + document.location.hash + '"]').closest('li').addClass('there');
});

You might want to consider renaming your IDs, though ;)

Edit 2, for the curious:

I had initially written the selector like this, which is obviously moronic:

$('#' + document.location.hash.replace('#',''))

Edit 3: Michael, I can't get my head around as to why the above isn't working - you might wanna try this approach, though:

$('#navigation a').click(function(){
    $('.there').removeClass('there');
    $(this).addClass('there');
});

Upvotes: 3

Related Questions