Highlighting an active tab - CSS

Question

I have a small tabbed navigation setup using CSS. When hovering over the tabs the colour changes, great. However when i click a tab and it navigates to the corresponding page, i would like that tab (the active tab?) to remain highlighted, indicating the current page.

I am currently doing this by using a class (.currenttab ) and then using this class in each HTML file. I am not using:

active

Is there a way for me to use active, rather than using a class in each individual HTML file, or is what i am doing correct?

Thank you in advance.

Answer 1

What you are doing is correct. The :active pseudo selector means something else - the event of activating a control (ie, the time between a user presses the mouse button and releases it).

Using a class to signify the selected item is the way to go.

Answer 2

It's far from ideal, but if you give every page and every tab an id, you can define the highlighting in css instead of html. I ran across a full explanation while looking up the active attribute:

Highlighting Current Page With CSS

A site I designed with this technique (pages, not tabs)

Answer 3

Here are some more examples brainjar Demo
More from Brainjar