0

我有一系列缩略图。默认情况下，应用了一个“p7_current”的活动类，它在该图像周围放置了一个边框。其他的都有一个“p7_inactive”类，它删除了边框。

如果在这组 6 个拇指中，最后一次单击的拇指具有“p7_current”类，其余的被分配为“p7_inactive”，我会喜欢它。

我怎么能用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>
4

2 回答 2

5 
$('.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 示例

于 2012-07-03T19:39:02.083 回答
1

您实际上可以将它减少到一行，尽管它可能不那么容易阅读：

$('.p7_postcard_thumbs img').click(function(e){
    $(this).addClass('p7_current').closest('div').find('img').not(this).attr('class', 'p7_inactive');
});

​JSFiddle：http: //jsfiddle.net/lucuma/4jSCM/3/

于 2012-07-03T20:14:48.480 回答