Necesito dejar seleccionada la opción del menú que corresponde a la vista actual.
Tengo el siguiente menú:
Código HTML :
nav> <ul> <li><a href="inicio.html">Inicio</a></li> <li> <a href="#">Usuarios</a> <ul> <li><a href="modificar.html">Modificar</a></li> <li><a href="agregar.html">Agregar</a></li> </ul> </li> <li><a href="reportes.html">Reportes</a></li> <li><a href="sAcceso.html">Solicitud de Acceso</a></li> </ul> </nav>
con Jquery hice una pequeña y básica función, pero no me funciona correctamente.
Código Javascript :
function activeMenu() { $('nav ul li').on('click', function(e){ $(this).addClass('active'); }); }
La verdad es que funciona, pero tengo que hacer clic 2 veces sobre el <li> para que se agrega el estilo que me muestra que esta activa.
Cual seria la forma correcta de poder hacerlo ? sin tener que hacer clic 2 veces y cuando haga clic se salga el estilo del <li> seleccionado anteriormente ?