onclick div應刪除類和添加類，但當點擊其他div時，應刪除第一個div類

Question

onclick div應該removeclass和addclass，但是當點擊其他div時，應該刪除第一個div類並將類添加到第二個div。假設我有基於jquery的圖庫。當點擊它縮略圖時，縮略圖應該像它被選中一樣。當我點擊另一個縮略圖時，應該選擇第二個縮略圖，並用.css（）取消選擇第一個縮略圖。

這裏是略圖HTML結構我使用..

<div class="team-pic"> 
    <div class="pic-corner"> </div> 
    <!-- end pic-corner --> 
    <a class="showSingle" target="1"><img src="images/pic-1.jpg" alt=" "></a> 
</div> 

他們有很多的div上課=「團隊PIC」。使用相同的html結構。我如何能與jQuery做

Answer 1

你可以試試這個：

<div class="team-pic"> 
    <a class="showSingle" target="1"> 
     <img src="http://www.placehold.it/50x50&text=1" alt=" " /> 
    </a> 
    <a class="showSingle" target="2"> 
     <img src="http://www.placehold.it/50x50&text=2" alt=" " /> 
    </a> 
    <a class="showSingle" target="3"> 
     <img src="http://www.placehold.it/50x50&text=3" alt=" " /> 
    </a> 
    <a class="showSingle" target="4"> 
     <img src="http://www.placehold.it/50x50&text=4" alt=" " /> 
    </a> 
</div> 

CSS：

.selected{ 

    border: 1px solid red; 
} 

JS：

$('.team-pic a').click(function(e){ 
    e.preventDefault(); 
    $('.selected').removeClass('selected'); 
    $(this).find('img').addClass('selected'); 
}); 

EXAMPLE

Answer 2

你可以試試這個。

.selectable是您的畫廊中的所有div。 .selected是當前選定的div。

$('.selectable').unbind('click').bind('click', function(){ 
     $('.selected').removeClass('selected'); 
     $(this).addClass('selected'); 
});