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

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

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

这怎么可能？CSS？Javascript？JQuery

到目前为止，我只有一张照片表：

HTML jQuery

---

Fiddle-

请发布您尝试过的代码，只是想让您知道这不是一个免费的众包网站，您可以简单地将想法传递给人们，让他们来构建它。@chris，我会很宽容，因为这是他的第一个问题。然而，埃德兹·约翰逊，请记住克里斯说的话。我希望您已经阅读了常见问题解答，并且清楚地知道该问什么和如何问。

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

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

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