Trouble targeting siblings

Hi I have an unordered list:

<ul class="prodDetails">
<li class="details1"><a href="">Link1</a></li>
<li class="details2"><a href="">Link2</a></li>
<li class="details3"><a href="">Link3</a></li>
</ul>

$("ul.prodDetails li.details1 a").addClass('prodDetailsOn').siblings().removeClass('prodDetailsOn');

I am trying to add the class "prodDetailsOn" to the href that is clicked, while removing it from all of the other开发者_运维百科 hrefs.

I'm missing the target somehow. Any ideas?

Thanks

You have to go back to the <li> element to get the other LI's.

$("ul.prodDetails li.details1 a").addClass('prodDetailsOn').parent('li').siblings().removeClass('prodDetailsOn');

$("ul li a").click(function() {
$("ul li a").removeClass("propDetailsOn");
$(this).addClass('propDetailsOn');
})

$(function(){
$("a").click(function(e){
e.preventDefault();
    $("a").not($(this)).removeClass("prodDetailsOn");
    $(this).addClass("prodDetailsOn");
});
});

here is the fiddle http://jsfiddle.net/3nigma/uF7M5/1/

This is actually a common pattern. What I do is first remove the toggle and then set it on the thing, that triggered the event.

$('.prodDetails a').click(function () {
    $('.prodDetails a.prodDetailsOn').removeClass('prodDetailsOn');
    $(this).addClass('prodDetailsOn');
});