2010-02-11 14 views
15

Tengo 4 anclas, deseo agregar una clase de corriente a un ancla mientras se hace clic y eliminar la clase de las otras 3 al mismo tiempo. Aquí está mi código. ¿Qué estoy haciendo mal?jquery add remove class

if ($("ul#thumb a").hasClass("current") { 
    $("ul#thumb a").removeClass("current"); 
    $(this).addClass("current"); 
}); 

y mi html se ve así:

<ul id="thumbs"> 
    <li> 
     <!-- intro page navi button --> 
     <a id="t0" class="active" name="t0">The Company</a> 

     <ul class="navi"> 
      <li><a style="display:none"></a></li> 
      <li><a id="t1" name="t1">The Brief</a></li> 
      <li><a id="t2" name="t2">The Solution</a></li> 
      <li><a id="t3" name="t3">The Result</a></li> 
     </ul> 

    </li> 
</ul> 
+0

¿Cómo se ve tu HTML? – Sampson

+0

¿Qué es exactamente lo que no funciona? ¿No está eliminando la clase o no está agregando las clases? Además, esto no se parece a la cantidad total de jQuery. Necesita algún tipo de '$ ('ul # thumb a'). Haga clic en (function() {...});' para envolverlo. –

+0

@Topher He modificado mi publicación para mostrar mi html – mtwallet

Respuesta

29

Mediante el uso de eventos delegación, sólo nos atamos a un controlador para todos los eventos de clic. Cuando se hace clic en un ancla (que no sea el .current ancla), nos tira la .current ancla de su clase, y hacer que el anclaje se hace clic la corriente nueva:

$("#thumbs").on("click", "a:not(.current)", function (event) { 
    $(".current", event.delegateTarget).removeClass("current"); 
    $(this).addClass("current"); 
}); 
+0

+1 - Buena captura. Edité la publicación y no vi que = P –

+0

@Jonathan He modificado mi publicación para mostrar mi html – mtwallet

+0

@Jonathan Sampson ¿Qué significa 'e.preventDefault();'? +1 por cierto – ant

0

creo que esto le ayudará a

$("a").click(function() { 
    $('a').removeClass('current'); 
    var id = $(this).attr('id'); 
    $('#'+id).addClass('current'); 
}); 
+0

¿Por qué mezclas '$' y 'jQuery'? Debes elegir uno y quedarte con él. – Lix

+1

siento que fue un error. Puedes usar uno – Raghvendra