I have a navigation bar on my webpage with links to different pages. Is there an easy way to automatically set the class on the navigation element corresponding to the current page? For instance, I want the "About Us" tab on the bar to have a different style if you're currently viewing the "About Us" page. I know I could rig up some PHP for each page, but I'd rather have a more general set-it-and-forget-it solution.
+2
A:
If you want a pure HTML/CSS solution, the best I can think of is to put a class on the body describing which tab should be highlighted, and an id on each tab, then target the tabs from there via CSS.
So for the HTML, the "About Us" page would have something like <body class="AboutUs"> while the "Home" page would have a similar <body class="Home">. The tabs would each have unique ids like "aboutUs" and "home".
Then in the CSS, you could style it like so:
body.AboutUs tabs#aboutUs,
body.Home tabs#home
{
/* selection style goes here */
}
Dan M
2010-06-04 03:45:30