2008-12-31 17 views
5

Tengo una configuración de navegación con pestañas pequeñas usando CSS. Al pasar el cursor sobre las pestañas, el color cambia, genial. Sin embargo, cuando hago clic en una pestaña y navega hacia la página correspondiente, me gustaría que esa pestaña (¿la pestaña activa?) Permanezca resaltada, indicando la página actual.Destacando una pestaña activa - CSS

Actualmente estoy haciendo esto usando una clase (.currenttab) y luego usando esta clase en cada archivo HTML. No estoy usando:

active 

¿Hay alguna forma para que yo use activo, en lugar de utilizar una clase en cada archivo HTML individual, o es lo que estoy haciendo correcto?

Gracias de antemano.

+0

Su pregunta doesn No lo deje completamente en claro, así que solo en caso de que no lo esté, asegúrese de colocar cualquier clase de CSS en un archivo .css separado y luego incluir eso en cada una de sus páginas html, para que no esté redefiniendo las clases. – RSlaughter

+0

Lo siento, no entiendo muy bien a qué te refieres. Actualmente tengo una hoja de estilo para todo, incluida la clase .currenttab. En cada archivo HTML, tengo la clase asignada al elemento de lista correspondiente (elemento de navegación). ¿Es esto incorrecto? – Ronnie

Respuesta

6

Lo que estás haciendo es correcto. El pseudo selector :active significa algo más: el evento de activar un control (es decir, el tiempo entre un usuario presiona el botón del mouse y lo libera).

El uso de una clase para indicar el elemento seleccionado es el camino a seguir.

+0

Gracias por la respuesta rápida. – Ronnie

3

No es ideal, pero si asigna una identificación a cada página y pestaña, puede definir el resaltado en css en lugar de html. Me encontré con una explicación completa al buscar el atributo activo:

Highlighting Current Page With CSS

A site I designed with this technique (páginas, no fichas)

+1

no es necesario ser muy pesado con la identificación, las clases serán suficientes, pero este enfoque le dará el mayor rendimiento por su dinero. Cuando comiences a avanzar hacia HTML/css más avanzados, el uso de agregar clases a la etiqueta corporal será una práctica mucho mejor. –

1

Éstos son algunos ejemplos más brainjar Demo
Más de Brainjar

+0

¿La demostración de brainjar está utilizando una clase .current dentro del HTML o utilizando el método descrito por Justin anteriormente? – Ronnie

+0

Creo que usa .active como se ve en la fuente –

Cuestiones relacionadas