Question

onclick div应该removeclass和addclass但是当点击其他div时，应该删除第一个div类并将class添加到第二个div。假设我有基于jquery的画廊。当点击它缩略图时，缩略图应该像选择它一样。当我点击另一个缩略图时，它应该选择第二个缩略图并用.css（）取消选择第一个缩略图。

这是我正在使用的thumnail 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都有class =“team-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');
});

onclick div应该删除类并添加类，但是当单击其他div时，应该删除第一个div类

2 个答案: