CSS: Cómo cambiar el color del menú de la página de navegación activa

Question

Estoy intentando cambiar el color del enlace de navegación de página activo o actual que el usuario selecciona en mi sitio web. ¿Qué estoy haciendo mal? Gracias.

Hasta ahora, el CSS tiene el siguiente aspecto:

div.menuBar 
{ 
    font-family: BirchStd; 
    font-size: 40px; 
    line-height: 40px; 
    font-weight: bold; 
    text-align: center; 
    letter-spacing: -0.1em; 
} 

div.menuBar li{list-style:none; display: inline;} 
div.menuBar li a:active{color:#FF0000;} 
div.menuBar ul{margin:0;} 

Y mi HTML llama una plantilla de página para el menú de navegación usando la función PHP incluir:

<div class="menuBar"> 
    <ul> 
    <li><a href="index.php">HOME</a></li> 
    <li><a href="two.php">PORTFOLIO</a></li> 
    <li><a href="three.php">ABOUT</a></li> 
    <li><a href="four.php">CONTACT</a></li> 
    <li><a href="five.php">SHOP</a></li> 
</ul> 

Answer 1

creo que está recibiendo confundido acerca de lo que hace el selector de a:active CSS. Esto solo cambiará el color de su enlace cuando haga clic en él (y solo mientras dure el clic, es decir, cuánto tiempo permanece pulsado el botón del mouse). Lo que debe hacer es introducir una nueva clase, p. .selected en su CSS y cuando selecciona un enlace, actualice la opción de menú seleccionada con una clase nueva, p.

<div class="menuBar"> 
    <ul> 
     <li class="selected"><a href="index.php">HOME</a></li> 
     <li><a href="two.php">PORTFOLIO</a></li> 
     .... 
    </ul> 
</div> 

// specific CSS for your menu 
div.menuBar li.selected a { color: #FF0000; } 
// more general CSS 
li.selected a { color: #FF0000; } 

Usted tendrá que actualizar su página de la plantilla para disfrutar de un parámetro selectedPage.

Answer 2

Añadir Identificación current para la página activa/actual:

<div class="menuBar"> 
    <ul> 
    <li id="current"><a href="index.php">HOME</a></li> 
    <li><a href="two.php">PORTFOLIO</a></li> 
    <li><a href="three.php">ABOUT</a></li> 
    <li><a href="four.php">CONTACT</a></li> 
    <li><a href="five.php">SHOP</a></li> 
</ul> 

#current a { color: #ff0000; } 

Answer 3

El estado CSS :active significa el estado activo del enlace cliqueado, el momento en que hizo clic en él, pero no soltó el botón del mouse todavía, por ejemplo. No sabe en qué página está y no puede aplicar ningún estilo a los elementos del menú.

para arreglar el problema que tiene que crear una clase y añadirlo manualmente al menú de la página actual:

a.active { color: #f00 } 

<ul> 
    <li><a href="index.php" class="active">HOME</a></li> 
    <li><a href="two.php">PORTFOLIO</a></li> 
    <li><a href="three.php">ABOUT</a></li> 
    <li><a href="four.php">CONTACT</a></li> 
    <li><a href="five.php">SHOP</a></li> 
</ul>