[thelist] JavaScript - searching for link and comparing

Tue Dec 21 16:55:36 CST 2004

On Tue, 21 Dec 2004 16:20:22 -0600, Pringle, Ron <RPringle at aurora-il.org> wrote:
> Hi all-
> 
> I'm a neophyte when it comes to Javascript. I'm trying to write some code
> that will search through my nav for a link matching the current page, and
> then write a css class to the containing <li> to style it as the current
> page the user is on.

You actually don't need javascript for this at all.

Add an id to the body tag, like so:

<body id="homepage">

Then, in your list:

<ul id="nav">
<li id="officelink"><a href="../aldermen/index.htm">Aldermans Office</a></li>
<li id="homelink"><a href="../aldermen/index.htm">Home Page</a></li>
<li id="blocklink"><a href="../aldermen/block_parties.htm">Block
Parties</a></li>
</ul>

Then, in your CSS:

#nav LI {
/* do your generic nav list item styling here */
}

#homepage #homelink {
 /* do your special "current link" styling here for page=homepage */
}

#officepage #officelink {
 /* do your special "current link" styling here for page=officepage */
}

#blockpage #blocklink {
 /* do your special "current link" styling here for page=blockpage */
}

Basically, these last three declarations say: apply this styling only
to the list item ID specified, provided it is preceded in the document
heirarchy by an element with the first-listed ID, which is our body
tag ID. If the ID specified is NOT preceded by the first-listed ID,
then the styling will not apply. Therefore, we have effectively
created conditional styling based on the current page.

Now, all you have to do is correctly ID the body tags of your pages.

Make sense?

-- 
Matt Warden
Miami University
Oxford, OH
http://mattwarden.com

This email proudly and graciously contributes to entropy.