Resaltando una pestaña activa - CSS

Question

Tengo una pequeña configuración de navegación con pestañ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 se desplaza a la página correspondiente, me gustaría que esa pestaña (¿la pestaña activa?) Permanezca resaltada, indicando la página actual.

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

active

¿Hay alguna forma de que use activo, en lugar de usar una clase en cada archivo HTML individual, o es lo que estoy haciendo correctamente?

Gracias de antemano.

Answer 1

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

Usar una clase para indicar el elemento seleccionado es el camino a seguir.

Answer 2

Está lejos de ser ideal, pero si le asignas a cada página y a cada pestaña una identificación, puedes definir el resaltado en css en lugar de html. Me encontré con una explicación completa mientras buscaba el atributo activo:

Resaltar la página actual con CSS

Un sitio que diseñé con esta técnica (páginas, no pestañas)

Answer 3

Aquí hay algunos ejemplos más demo brainjar
Más información sobre Brainjar