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!

[download#4]


8 thoughts on “jQuery Highlight Navigation Menu v.01 Script”

paul · January 27, 2009 at 4:58 am

Hi, thanks for your script.

Couple of things needed to be changed in order for it to work.

Firstly, don’t think the square brackets around the path are necessary i.e. [ + path + ]

Secondly, I found it useful to use the ‘ends with syntax for matching the path i.e instead of “a[href=’ + path I used “a[href $=’ + path

see docs at http://docs.jquery.com/Selectors/attributeEndsWith#attributevalue

anyway, it’s live and working on a site I did, http://www.worldmarathonchallenge.com

Jake Rutter · January 27, 2009 at 8:06 am

Excellent, Im glad I could help you out. Im going to try the ‘ends with syntax’ too. The attribute stuff in jQuery is pretty powerful.

akhil · August 25, 2009 at 6:52 am

i have an issue with this script as this is not working fine in IE6, what may be the issue

Unibands · April 13, 2010 at 3:32 pm

Great stuff. Thanks

Dan · May 17, 2010 at 9:15 am

Hi, thanks for the code. Unfortunately I can't get it to work. I tried Pauls version from his live site but unfortunately can't get it to work either.

I used:

$(document).ready(function(){
var path = location.pathname;
$("a[href $='" + path + "']").parents("li").each(function() {
$(this).addClass("current");
});

and am linking to the lattest JQuery. I have my main nav within a container and the UL has an id of 'nav'.

Any help or advice is greatly appreciated.

    Ger · December 16, 2010 at 3:34 pm

    Hi Dan
    Think your just mising your closing brackets. I've used the code below and it seems to work.
    <script language="javascript" type="text/javascript">
    $(document).ready(function(){
    var path = location.pathname;
    $("a[href $='" + path + "']").parents("li").each(function() {
    $(this).addClass("current");
    });
    })
    </script>

      JJ-DR · May 18, 2011 at 5:51 pm

      can you paste the html code as well? Mine is not working.

Damon · January 18, 2011 at 2:21 pm

You have to make sure that in your CSS, the "current" class is changing the LI of the link… if your CSS is telling the A tag to use "current", then remove the: .parents("li") section of the script. That way, you are telling the script to find all of the a tags that match the path, then apply the current class to that, rather than it's LI tag.

Hope that helps.

Leave a Reply

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

Related Posts

Web

Angular JS Magazine on Flipboard

I have been working with AngularJS for about a year now, trying to learn as much as I can about this growing framework. It’s been a wild ride and I’m going to post a summary Read more…

GruntJS

My First GruntJS Plugin: Bust My Cache

GruntJS is a JavaScript Task runner that has been around for about 2+ year, at least as far as I can remember. I started playing around with GruntJS which uses Node.js about a year ago, Read more…

Top 5

Top 5 Articles : Week of November 25

During the the week of November 25th, I really started to dive into Angular JS. My top 5 articles of the week are mainly about AngularJS, an MVC framework by Google. #1 : AngularJS WebInspector Read more…