I have found a simpler way to add class=”selected” to any navigation menu by checking your URL path against links on the page. I’ve only tested this with page slugs in wordpress. But it works very nicely.

// Highlight Tab v.02 by Jake Rutter
// Website: http://www.onerutter.com
// Feel free to use and adapt, please just give credit where credit is due.

        jQuery(document).ready(function(){
             var path = location.pathname;
              jQuery("a[href$='" + path + "']").addClass("selected");
     });
Categories: jQuery

7 thoughts on “jQuery Highlight Navigation Menu v.02 Script”

lorenzo · July 27, 2009 at 9:00 pm

are you using superfish or?
I'd like to see some source files.

Thanks!

vlp · July 31, 2009 at 8:28 am

Hi, thanks for the script, I just have one problem. On the homepage all the menu items get class selected…how to select just "Home"?

vlp · July 31, 2009 at 9:14 am

I found this solution to my previous comment –

jQuery(document).ready(function(){
var path = location.pathname;
if(location.pathname != "/") {
jQuery("a[href$='" + path + "']").addClass("current");
} else $('#menu a:eq(1)').addClass('current');
});

Anonymous Coward · August 5, 2009 at 10:02 am

This works great if there already is no class attribute set. But my link already has an attribute. For example class="someclass", and this snippet doesn't make it class="someclass selected", which is what I want. Would that be possible? This snippet was great help for me and I am not very fluent in javascript.

sid · August 25, 2009 at 6:58 am

This is not working in IE 6, pls tell how to make it work in IE6

raj · August 25, 2009 at 7:42 am

I have an issue with the script. In IE6, the script is not working. How to solve it ?

raj · August 25, 2009 at 9:21 am

one more solution from my side
jQuery(document).ready(function(){
var file_name = document.location.href;
var end = (file_name.indexOf("?") == -1) ? file_name.length : file_name.indexOf("?");
jQuery("a[href='" + file_name.substring(file_name.lastIndexOf("/")+1, end) + "']").addClass("selected");
});

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

eCommerce

Optimizely and jQuery – The new A/B Testing Platform

Being that I work in the eCommerce space, we talk a lot about A/B testing and it has also become a huge topic of conversation on the internet/twitter/facebook. Over the past two years, there have Read more…

HTML5

What are Web Hooks?

In an effort to push my skills front-end development with jQuery, I have began trying to learn more about Web Hooks. Web Hooks are essentially user-defined callbacks or events, which can be used in a Read more…

jQuery

Smashing jQuery – Working on Updated eBook.

Just wanted to let all my fans who have purchased Smashing jQuery that I’m currently working with my publisher, Wiley, to fix all of the code errors that are present in the book and we Read more…