Question

I have a series of thumbnails. One by default has an active class of “p7_current” applied to it which puts a border around this image. The others all have a class of “p7_inactive” which removes the border.

I’d like it if in this group of 6 thumbs that the last one clicked has the class of “p7_current” and the rest are assigned “p7_inactive”.

How could I go about this with jquery?

<div class="p7_postcard_thumbs">
    <a href="#" target="p7_postcard_iframe"><img src="images/p7_pc1.jpg" class="p7_current" /></a>
    <a href="#" target="p7_postcard_iframe"><img src="images/p7_pc2.jpg" class="p7_inactive" /></a>
    <a href="#" target="p7_postcard_iframe"><img src="images/p7_pc3.jpg" class="p7_inactive" /></a>
    <a href="#" target="p7_postcard_iframe"><img src="images/p7_pc4.jpg" class="p7_inactive" /></a>
    <a href="#" target="p7_postcard_iframe"><img src="images/p7_pc5.jpg" class="p7_inactive" /></a>
    <a href="#" target="p7_postcard_iframe"><img src="images/p7_pc6.jpg" class="p7_inactive" /></a>
</div>

Answer 1

$('.p7_postcard_thumbs img').click(function(e){
    $('.p7_postcard_thumbs img').removeClass('p7_current p7_inactive').not(this).addClass('p7_inactive');
    $(this).addClass('p7_current');
});​

jsFiddle example