Highlight Current Page

This is a simple but effective little script originally by Dan Grahn.

I was looking for a script like this was because initally, the only way I knew how to highlight the current page in the navigation was to make a class in the css and apply it to the relevant button on each page. This was problematic because I've always preferred to call the navigation from a php include (to simplify things when I need to add or remove a link from the navigation). Most of the time, my desire to use a php include would win out, so I simply went without a highlight on the current page.

This script allows me to keep the php include and also have a highlight, so I'm pretty pleased with it. If javascript is turned off, it's all still perfectly accessible, you just don't see the highlight.

The script looks like this:

for ( i = 0; i < document.links.length; i += 1) {
	
  var a = document.links[i]

  if (a.href == window.location) {
    a.setAttribute("id","current")
  }
}

To get it working, just put in a link:

<script type="text/javascript" src="highlight.js"></script>

on your page, after the markup for your navigation. Put it before the navigation and it won't work. I've noticed though, that if I put it in the php include with the navigation, even if it's at the top of the include (i.e. before the navigation markup), it still seems to work. I'm sure there's a reason for that but it's beyond me.

Anyway, just make sure you define #current in your css and you should be sweet.

Highlight Current Page

More...