Dynamically Style a Link to its "Active" Pseudo-class

[FONT=“Georgia”]Here’s my problem.

I have strip of navigation tabs, which are marked up as a[/FONT] <ul> [FONT=“Georgia”]and styled to look like tabs with borders and all that.

In my stylesheet I have the pseudo-classes for[/FONT] :link , :visited , :hover , :active [FONT=“Georgia”]and all of those work fine.

But I’d like to have the browser highlight whichever link a viewer is currently on by having Javascript activate the already defined[/FONT] :active [FONT=“Georgia”]pseudo-class.

What’s the syntax for that? Is it even possible?

I’ve been googling for almost an hour and havn’t gotten anything.

[/FONT]

[FONT=“Georgia”]The CMS is generating the HTML for the navigation so I’m stuck there.

I’ll figure something out though.

Thanks!

[/FONT]

I know there’s no :current pseudo-class. I’d like to artificially recycle what I defined for :active [FONT=“Georgia”]in my stylesheet to highlight what’s current.

Without having to use five lines of Javascript to set everything one style at a time, nor create a new class.

[/FONT]

Sounds like you are getting active and current mixed up.

The :active pseudoclass is the style that applies while the mouse or enter key is depressed - it has nothing to do with which is the current page. There is no :current pseudo class unfortunately.

If the current one is supposed to be the one that relates to the current page, the advised way is to use a body identifier, so that you can then explicitly target that from the navigation itself.

For example:


<body id="contactus">
...
<ul id="nav">
    <li id="navaboutus"><a href="...">...</a></li>
    <li id="navcontactus"<a href="...">...</a></li>
    ...
</ul>
...

You can then use the following CSS to set a current status to the appropriate one:


body#aboutus #navaboutus,
body#contactus #navcontactus {
    /* current nav link style here */
}

This means that only on the contactus page, will the nav link for contactus have a different style, and likewise for other pages such as the aboutus page.

Here’s a video tutorial that takes you through the process.
Current Nav Highlighting: Using PHP to Set the Body ID