Sé que esto es increíblemente fácil, pero he estado escribiendo y reescribiendo esta función durante una hora sin éxito:

Al hacer clic, quiero agregar "activo" a la<li> del enlace en el que se hizo clic y eliminar "activo" de todos los demás<li>está en la barra de navegación.

HTML:

   <nav>
     <ul>
       <li><a href="http://0327ea8.netsolhost.com/#home" class="home">Home</a></li>
       <li><a href="http://0327ea8.netsolhost.com/blog/" class="blog">Blog</a></li>
       <li><a href="http://0327ea8.netsolhost.com/#catalog" class="catalog">Catalog</a></li>
       <li><a href="http://0327ea8.netsolhost.com/#authors" class="authors">Authors</a></li>
       <li><a href="http://0327ea8.netsolhost.com/#store" class="store">Store</a></li>
     </ul>
   </nav>

jQuery:

  // NAVBAR ADD ACTIVE
   $("nav ul li a").click(function(){
     $("nav ul li").removeClass('active');
     $(this).stop().animate();
     $(this).parent().addClass('active');
   });

Esto está agregando las clases muy bien, pero no puedo eliminarlo.

También he intentado separarlo para separar funciones sin suerte.

Tengo el .stop (). Animate () allí porque tengo un .animate () en el estado de desplazamiento de los enlaces.

¡Gracias!

editar:

Esta es la jQuery para el vuelo estacionario y la razón por la que tengo .stop (). animate ()

   $("nav ul li a, aside ul li.categories a, div.posts div.foot a").hover(function(){
     $(this).animate({'backgroundColor' : '#edf5e9'}, 200);
   },function() {
     $(this).animate({'backgroundColor' : '#ccd4c8'}, 600);
   });

No estoy seguro de por qué .stop (). Animate () está mal. Si no tengo .animate () la clase activa no se pegará, si lo tengo, la clase activa sí.

Sin embargo, todavía no puedo eliminar la clase: - /