Comments on: Auto-selecting navigation

By: Kelvin Luck

Kelvin Luck — Mon, 04 Sep 2006 12:13:30 +0000

Nice solution - very clean, especially in jQuery!

How about changing:

window.onload = function() {

to:

$(document).ready(function() {

in the jQuery version? It seems a little more jQueryish and you don't need to worry about overwriting or being overwritten by any other document.onload scripts (which the current script could do),

Cheers,

Kelvin :)

By: Fallo

Fallo — Tue, 19 Sep 2006 00:43:27 +0000

With the jquery 1.0 +

$(document).ready(function(){ if (location.pathname.substring(1)) $(’#linklist a[@href$=”’ + location.pathname.substring(1) + ’”]’).attr(‘class’, ‘here’);
});

change the .set to .attr

By: Steve

Steve — Sat, 23 Sep 2006 23:12:32 +0000

$(document).ready(function(){}) is the same as $(function(){}).

So we can even shorten it further.

$(function(){ if (location.pathname.substring(1)) $(â€™#linklist a[@href$=â€â€™ + location.pathname.substring(1) + â€™â€]â€™).attr(â€˜classâ€™, â€˜hereâ€™);
});

By: Gios

Gios — Thu, 05 Oct 2006 03:46:08 +0000

Here is another way:

$(function(){
$(”#menu”).find(“a”).each(function(){
if( location.href.indexOf(this.href) != -1) {
$(this).addClass(“here”);
}
});
});

By: federico

federico — Fri, 20 Oct 2006 20:02:31 +0000

hello, i have tried your jquery script but it is not working… is it because my links are in this format? Any ideas?

By: Adam Messinger

Adam Messinger — Mon, 06 Nov 2006 05:37:45 +0000

You can actually do this without any JavaScript at all, using only CSS. Roger Johansson has a tutorial.

By: Elisa

Elisa — Wed, 29 Nov 2006 09:25:43 +0000

Hi, I tried the script but it only works with Internet Explorer 7. With other browsers it doesn’t work… That’s right?

By: Remy

Remy — Wed, 29 Nov 2006 12:31:43 +0000

@Elisa – to honest I’ve not tried the script in IE 7 yet – but I can confirm that it works in Safari and Firefox. I use it for my own sidebar links and it works fine for me.

Maybe you could post an example?

By: Michael

Michael — Mon, 04 Dec 2006 19:29:09 +0000

The method referenced by Adam above using only CSS only works for the top level of navigation. If you have multiple levels that you need highlighting to work for, you’d need to add a lot more css and html to your code.

The method in this tutorial is very elegant. Thanks

By: Manfred Morgner

Manfred Morgner — Sun, 10 Dec 2006 16:11:11 +0000

The ‘pur CSS solution’ does not separate the content from te layout! Therefore, this way only hides the ‘Old Style Problem’.

By: Voyagerfan5761

Voyagerfan5761 — Tue, 23 Jan 2007 02:20:39 +0000

Ah! Wonderful, especially since I already had jQuery for sortable tables. Two lines, a little modification to the CSS stylesheet, and BOOM! Thanks a lot!

By: mediavrog

mediavrog — Sat, 07 Jul 2007 13:09:16 +0000

Well as this JS method being not unobstrusive i don't like this approach and would prefer a pure css solution like Roger Johanssons.
Another question: what if the pathname ends with an anchor tag like #myanchor - will the a href still match the location.pathname?

By: jim

jim — Tue, 10 Jul 2007 15:40:29 +0000

Here's an idea I was playing with.... I wanted this to work for subpages of a site as well. This pulls of the first folder of the link: (sitename.com/firstfolder/subpage/ would check for firstfolder only)


$(function(){ if (location.pathname.substring(1))
  $('#mainlinks a[@href*="' + location.pathname.substring(1,location.pathname.indexOf("/",1)) + '"]')
    .attr('class', 'selected')
});

By: Roman

Roman — Sat, 14 Jul 2007 22:58:01 +0000

Hello! Great idea! But how about second and third level menus?

By: brwalias

brwalias — Mon, 29 Oct 2007 22:05:18 +0000

Hi,

I'm new to JQuery but love the simplicity of it and love working with it so far. How would I go about highlighting 2 navigation areas on a page if I have a main and subnav?

By: francesco

francesco — Fri, 21 Dec 2007 17:39:42 +0000

hi ,
everybody. I am trying to make work your great script but without success...maybe because I have applied the id to a div tag instead of a ul tag? can you please give me a working demo using javascript? (I have also tried with jquery but nothing changes...)
my attempts can be seen here:
http://www.viabenedicti.it/en
if you click on Places of worship and choose a submenu item it should become red...but the class active is not applied... :( thanx a lot!