Jquery onclick, pero realiza una acción después de recargar la página

Uso la barra de navegación de Twitter/Bootstrap y quiero agregar la clase "activa" dinámicamente.

Hay un código Jquery que se supone que hace eso: Mi problema: agrega la clase "activo" pero también es un enlace, por lo que las páginas se recargarán y el código perderá su efectividad.

$(document).ready(function() {
    $(".nav li").click(function() {
        $(this).addClass("active");
    });
});

Hay 5 elementos. El clic funciona y agrega la clase, pero el enlace en LI ya no funciona, además de que debería eliminar la clase activa y agregarla a la nueva.

preguntado el 03 de diciembre de 13 a las 12:12

3 Respuestas

Si su LI tiene un enlace, intente esto

NOTA: Si SÍ recarga, necesitará una cookie o configurar el hash para recordar el estado del enlace activo

Demo en vivo

$(function() {
    $(".nav li").click(function(e) {
      if (e.target.nodeName == "A") {
          e.preventDefault();
      }
      $(this).siblings().removeClass()
      $(this).addClass("active");
  });
});

Con funcionalidad de cookies:

$(function() {
    $(".nav li").on("click",function(e) {
      if (e.target.nodeName == "A") {
          e.preventDefault();
      }
      $(this).siblings().removeClass()
      $(this).addClass("active");
      $.cookie("li",this.id);
  });
  var li = $.cookie("li");
  if (li) $("#"+li).addClass("active");
});

Respondido el 27 de enero de 14 a las 01:01

esto funciona un poco, pero después de que la página se vuelve a cargar, vuelve a ser lo mismo y ninguno de ellos está "activo". - user3008711

Recibí una cookie, por lo tanto, no puedo entender por qué todavía no funciona. user3008711

Inicié firebug -> cookies -> hay una cookie de mi sesión actual, estoy usando rieles si es importante, ¿entendí que corrigiera lo que quería? - user3008711

Todavía no funciona después de la recarga, es lo mismo ... gracias por tu esfuerzo - user3008711

Ahora imagine que después de presionar un enlace llega a otra página y luego la clase "activa" desaparece nuevamente. - user3008711

NO USE COOKIES. ¡Tu página se está recargando!

En lugar de usar una cookie para recordar en qué enlace hizo clic, solo debe verificar si los enlaces en el navegador son los mismos que la URL actual, y si son los mismos, agregue una clase activa. 

$(document).ready(function(){
  $(".nav li").each(function(){
    var href = $(this).find('a').attr('href');
    if (href === window.location.pathname) {
      $(this).addClass('active');
    }
  });
});

esto se ejecutará después de que su página se vuelva a cargar, ¡pero estará bien!

el problema con las cookies es que alguien hará clic en un enlace, luego se irá y regresará, pero sus cookies les mostrarán el enlace activo incorrectamente (¡porque la cookie lo almacenó!)

Respondido el 21 de diciembre de 15 a las 20:12

Pruebe éste 

$("body").on("click",".nav li",function(){
        $(this).addClass("active");
});

esta función se cargará después de que se carguen todos los elementos

Respondido el 03 de diciembre de 13 a las 12:12

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.