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

A few months ago, I created a little script using the jQuery library which will add class=”current” to tabs, allowing you to highlight your menu for you users. Its pretty basic, but it searches the URL, if it finds a match with the link that was clicked – then it add’s class=”current” to that particular tab. You can then use that class in your css, to make a highlighted state.

Here is the code:

 
// Highlight Tab v.01 by Jake Rutter
// Website: http://www.onerutter.com
// Feel free to use and adapt, please just give credit where credit is due.
 
// ----------- highlight tab function -----------
    var path = location.pathname;   
 
    var home = "/";
    $("a[href='" + [ path ] + "']").parents("li").each(function() { 
        $(this).addClass("selected");
    });

Feel free to adapt and use this code on your site, I would appreciate it if you could leave my comments in as the creator in the .js file. If you are unfamiliar with how jQuery works, you can read this tutorial which will get you up to speed!