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.