Cómo mantener un enlace activo CSS

To asegurar que los visitantes sepan de un vistazo la página que están viendo, es una buena idea para diseñar los menús de navegación de manera que automáticamente mantiene vínculos actuales activo. Esto se puede lograr con CSS básica. Cosas que necesitará búsqueda Web navegador tiene texto editor
Ver Más instrucciones
Configuración del documento HTML
1

Crear un menú list.This desordenada incluye 3 enlaces: "Home", "Acerca de" y Página 2

Agregar una etiqueta de ancla a cada elemento de la lista y el enlace a la página correspondiente.


3

Añadir relacionada clases CSS.


4

Conecte el CSS referencia de estilo para el documento HTML. Agregue el código siguiente a la etiqueta head:


5

Para cada página, agregue la clase de órgano apropiado. A modo de ejemplo, para la página de inicio, agregue:


Para el relacionado con la página, añadir:


para la página de servicios, añadir:


Configurar la Red CSS Página 6

Crear un documento CSS y el nombre de "style.css" y asegurarse de que este documento se guarda en el mismo nivel que las demás páginas.
7

En el "estilo . documento css ", añade un estilo especial para dirigir el cuerpo y el ancla etiquetas para los elementos de lista específicos. Aquí, estamos estamos convirtiendo el rojo fondo |

body.home a.home {background-color: red;}

body.about a.about {background-color:. Roja; }

body.services a.services {background-color: red;}
8

Alternativamente, se combinan todos los elementos al código CSS de manera más eficiente, mientras se logra el mismo efecto <. br>

body.home a.home, a.about body.about, body.services a.services {background-color: red;}