[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