[thelist] NavBar, highlighting current link

Kevin Cannon p+evolt at redbrick.dcu.ie
Fri Feb 21 11:29:01 CST 2003


On Fri, Feb 21, 2003 at 04:52:50PM +0000, Kevin Cannon wrote:
> I just want to highlight the current page,
> and in the absencs of an a:current pseudo element in CSS i'm wondering wht my
> options are.

To followup to my own post, I'm thinking javascipt is the way to go.
I'd like something that reads the DOM and ads a class to it.
It just seems to make more sense to do it that way.

After some research here's what I found:
http://www.surguy.net/menu/highlight.html

function getURLLeaf() {
  var url = document.location.href;
  return url.substring(url.lastIndexOf("/")+1);
}

function highlightCurrentMenuItem() {
  var currentLocation = getURLLeaf();
  var menu = document.getElementById("mainmenu");
  links = menu.getElementsByTagName("a");

  for (i=0; i<links.length; i++) {
    if (links[i].getAttribute("href")==currentLocation) {
      links[i].setAttribute("class", "current");
      // More obvious to use parentNode.parentNode.firstChild, but this
      // may give a whitespace text node.
      links[i].parentNode.parentNode.getElementsByTagName("div").item(0).setAttribute("class", "current");
    }
  }
}

That doesn't work in IE6 though, has anyoen got any ideas.
If i can get it working in IE6 then I'll ad other improvments such as only
searching through a a div with #navigation so that it doesn't spend ages
running through pages with lots of links.

Also, changing the CSS clas sname would be useful too.

- Kevin, not too experienced in DOM scripting



More information about the thelist mailing list