照片网格 - 多个选择/突出显示？切换？

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/