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

Question

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

这样用户就可以点击说三个图像，这三个图像将有一个绿色边框，表明它们已被选中。然后，如果他想取消选择，只需再次单击，它就会恢复为原始样式。

这怎么可能？CSS？Javascript？查询？

到目前为止，我所拥有的只是照片表：

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/