Resalta la página actual en jquery

Tengo las páginas de 12 html. y todas estas páginas son cargadas cuando se hace clic en el enlace de la barra de navegación izquierda. en esto, necesito agregar una clase al enlace actual, que se hace clic y carga la página. intenté con esto:

$(function(){ $('#container li a').click(function(){ $('#container li a').removeClass('current'); var pathname = (window.location.pathname.match(/[^\/]+$/)[0]); var currentPage = $(this).attr('href'); if(currentPage==pathname){ $(this).addClass('current'); } else{ alert('wrong'); } // alert(pathname+' currentPage: '+currentPage); }) }) 

funciona, pero en la carga de la página, la clase se elimina, no sé por qué está sucediendo …

¿alguna ayuda?

Jimmy tiene razón. Cuando recarga una página, el navegador también actualiza el código JavaScript, lo que significa que todas las variables y ajustes que haya realizado también se restablecerán. Esta es la razón por la cual la clase parece ser eliminada cuando haces clic en el enlace.

La solución aquí sería modificar su código para recorrer todos los enlaces y comparar cada uno con la URL de la página actual. Cuando encuentre una coincidencia, llame a la función addClass para que ese enlace cambie su color. Entonces, algo como esto debería funcionar:

 $(function(){ var pathname = (window.location.pathname.match(/[^\/]+$/)[0]); $('#container ul li a').each(function() { if ($(this).attr('href') == pathname) { $(this).addClass('current'); } }); }); 

Tenga en cuenta que estamos llamando a esta función de bucle en la carga de la página, en lugar de llamarla cuando el usuario hace clic en un enlace … porque al hacer clic en un enlace la página se volverá a cargar, lo que restablecerá todas las variables de JQuery.

Espero que esto ayude.

Con jQuery, siempre pienso que es mejor usar el selector jQuery para filtrar los elementos que desea afectar, en lugar de recorrerlos ellos mismos. Aquí está mi solución:

 $(document).ready( function () { var pathname = (window.location.pathname.match(/[^\/]+$/)[0]); $("#container li a").removeClass("current"); $("#container li a[href='" + pathname + "']").addClass("current"); }); 

JavaScript es un idioma del lado del cliente en el navegador por lo que los cambios que realice en una página duran solo hasta que se cierra la ventana o se carga una página nueva. Lo que estás intentando debería hacerse realmente en el lado del servidor. Si insiste en usar JavaScript o si un idioma del lado del servidor no está disponible para usted, deberá resaltar el enlace de navegación de la página actual cuando se carga la página en lugar de hacerlo al hacer clic en uno de los enlaces.