照片网格-多选/高亮？切换？

Question

我有一系列的照片。我需要的是用户能够点击他们想邀请参加活动的人的照片。第一次单击时，我希望它改变CSS/样式(例如，添加边框或更改透明度)，然后第二次单击恢复为原始样式。所以我想切换一下吧。

这样用户就可以点击三张图片，这三张图片会有一个绿色的边框，表示他们已经被选中。然后，如果他想取消选择，只需再次单击，它就会恢复到原来的样式。

这怎麽可能？CSS？Javascript？JQuery？

到目前为止，我得到的只是一张照片：

Answer 1

HTML

<div class="user">john</div>
<div class="user">doe</div>
<div class="user">larry</div>
<div class="user">sergey</div>​

CSS

.user {border: 1px solid #ededed; cursor: pointer; width: 100px; padding: 10px; margin-bottom: 10px}
.active {border: 1px solid #0066cc; background: #eeeeee;}​

jQuery

$('.user').on('click', function() {
    $(this).toggleClass('active');
});​

小提琴- http://jsfiddle.net/qgGne/