change id depending on url

[kallywag]

Hi there,

I'm a total javascript newbie, but I figure my request is pretty basic for someone with any experience.

I have a navigation in unordered list < ul > format. I apply an id of "active" to the anchor <a id="active"> within a list item <li> in order to indicate the current section/page. Here is a sample of what it would look like for the 'about' section:

<ul>
<li><a href="/about" id="active">About</a></li>
<li><a href="/contact">Contact</a></li>
etc.
</ul>

I would like to generate the 'active' id automatically, I'm assuming by using location.href even if it means using absolute URL's. But the thing is I would like to have it so that it would apply the 'active' id to URL's such as domain.com/about and domain.com/about/philosophy equally.

So I was thinking something like:

function setactivestate() {
if (document.getelementbyhref) <-- I know this doesn't exist but that's where you're supposed to help me!
{
var nodeobj = document.getelementbyhref;
if nodeobj = location.href {
nodeobj.id = active;
}
}

I know this is probably very simplistic, but maybe someone could tweak it to work.

 

[tnsbuff]

See if this helps:

http://tek-tips.com/viewthread.cfm?qid=982839

 

[kallywag]

That looks good, however I still want the 'about' link to be "active" even when you're on, say, domain.com/about/philosophy.html, not only when you're on domain.com/about. Will it do this?

 

[tnsbuff]

Oh, I didn't pick up on that requirement. I thought you were referring to a directory where the index page wasn't specified such as about/ rather than about/index.html.

I'm sure there's a way to do it but I'm not that well versed in javascript. Hopefully someone will come along who is.