1 reply [Last post]
Last seen: 17 years 34 weeks ago
Joined: 2005-02-02
Posts: 2
Points: 0

Hi everyone!

I am asking a hypothetical question here...and if any of you think a solution is possible (using css & javascript), then please share code!

I want to have all of my left-menu links defined to be a different color than other links on the rest of the page. Easy enough using simple CSS classes. But I also want to change the color of one of the left-menu links based on the page I am viewing.

Example: If I go to the home page, I want the "Home" left-menu link to be black, instead of red. However, I want this to be automated using javascript or something, so that the browser would see that I am currently viewing "index.html" (the Home page), and so that specific link should be black, not red. Similarily, if I visit the "Contact" page, because I am viewing contact.html and the link is "contact.html" in the menu, I want that link to be black, not red.

Make sense? Is this possible?



P.S. I'm thinking in theory here.... if I set a variable in the [head] of each page declaring the current url (example: index.html, contact.html), then couldn't we also have a javascript that compared the link's href value to that declared variable, and if they were equal, set the link's class accordingly?

Help! I'm wallowing in the theoretical here!

rmfred's picture
Rock Springs, WY
Last seen: 3 years 51 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Using CSS & Javascript to change a link based on it's UR

Don't need javascript... give each page a body id
simple little example:

/* Set current page menu highlight */
body#page2 a#page2nav,
body#page3 a#page3nav
{color: #f00;cursor:text;font-weight:bold;}

then in the html:
<body id="page2">
<a href="#" id="page2nav">Page 2</a>
<a href="#" id="page3nav">Page 3</a>