Saltar al contenido

Cambiar el color del enlace de la página actual con CSS

Estate atento ya que en este escrito vas a hallar la contestación que buscas.

Solución:

Con jQuery podrías usar el .each función para iterar a través de los enlaces con el siguiente código:

$(document).ready(function() 
    $("[href]").each(function() 
        if (this.href == window.location.href) 
            $(this).addClass("active");
        
    );
);

Según la estructura de su página y los enlaces utilizados, es posible que deba reducir la selección de enlaces como:

$("nav [href]").each ...

Si está utilizando parámetros de URL, puede ser necesario eliminarlos:

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

De esta manera no tienes que editar cada página.

a:active : cuando haces clic en el enlace y lo mantienes presionado (¡activo!).
a:visited : cuando el enlace ya ha sido visitado.

Si desea que se resalte el enlace correspondiente a la página actual, puede definir un estilo específico para el enlace:

.currentLink 
   color: #640200;
   background-color: #000000;

Agregue esta nueva clase solo a la correspondiente li (enlace), ya sea del lado del servidor o del lado del cliente (usando JavaScript).

Es posible lograr esto sin tener que modificar cada página individualmente (agregando una clase ‘actual’ a un enlace específico), pero aún sin JS o un script del lado del servidor. Esto usa el :objetivo pseudoselector, que se basa en #someid que aparece en la barra de direcciones.




    Some Title




Stuff about science

lorem ipsum blah blah

Hay un par de restricciones:

  • Si no se navegó a la página usando uno de estos enlaces, no se coloreará;
  • Las identificaciones deben aparecer en la parte superior de la página; de lo contrario, la página saltará un poco hacia abajo cuando se visite.

Siempre que los enlaces a estas páginas incluyan la identificación y la barra de navegación esté en la parte superior, no debería ser un problema.


Otros enlaces en la página (marcadores) también harán que se pierda el color.

Sección de Reseñas y Valoraciones

Si para ti ha sido útil nuestro post, sería de mucha ayuda si lo compartieras con el resto juniors de esta forma contrubuyes a extender este contenido.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *