tags:

views:

3611

answers:

3

Hello,

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.

+3  A: 

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.

Eran Galperin
Thank you for the quick response.
Ronnie
+2  A: 

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)

Justin Love
no need to get really heavy with the id's, classes will suffice, but this approach will get you the biggest bang for your buck. When you start moving toward more advanced HTML/css the use of adding classes to the body tag will be a much better practice.
Steve Perks
A: 

Here are some more examples brainjar Demo
More from Brainjar

Kb
Is the brainjar demo using a .current class within the HTML or using the method described by Justin above?
Ronnie
I think it uses the .active .visited as it looks like in the source
Kb