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

おそらく読みにくいかもしれませんが、実際には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 に答える