Javascript 选定库图像周围的边框

我有一个图像库供用户选择。我希望他们选择的那一个用边框勾勒出来。我假设这将与js一起完成，但我不确定它会是什么样子。以下是HTML：

<div id="thumb_images" class="gallerycontainer" >
 <a class="thumbnail" href="#thumb"><img src="../images/white.gif" width="75px" height="75px" border="0"at="white.gif" onclick="changePicture(this);" /><span><img src="../images/white.gif" /><br /></span></a>
 <a class="thumbnail" href="#thumb"><img class="next_to_upload" src="../images/travel.gif" width="75px" height="75px" border="0" at="travel.gif" onclick="changePicture(this);" /><span><img src="../images/travel.gif" /><br /></span></a> 
 <a class="thumbnail" href="#thumb"><img class="next_to_upload" src="../images/coffee.gif" width="75px" height="75px" border-radius="25px" at="coffee.gif" onclick="changePicture(this);" /><span><img src="../images/coffee.gif" /><br /></span></a>
 <a class="thumbnail" href="#thumb"><img class="next_to_upload" src="../images/meditation.gif" width="75px" height="75px" border="0" at="meditation.gif" onclick="changePicture(this);" /><span><img src="../images/meditation.gif" /><br /></span></a>
 <a class="thumbnail" href="#thumb"><img class="next_to_upload" src="../images/hobbies.gif" width="75px" height="75px" border="0" at="hobbies.gif" onclick="changePicture(this);" /><span><img src="../images/hobbies.gif" /><br /></span></a> 
 <a class="thumbnail" href="#thumb"><img class="next_to_upload" class="next_to_upload" src="../images/fence.gif" width="75px" height="75px" border="0" at="fence.gif" onclick="changePicture(this);" /><span><img src="../images/fence.gif" /><br /></span></a>
 <a class="thumbnail" href="#thumb"><img class="next_to_upload" src="../images/sheep.gif" width="75px" height="75px" border="0" at="sheep.gif" onclick="changePicture(this);" /><span><img src="../images/sheep.gif" /><br /></span></a>
 <a class="thumbnail" href="#thumb"><img class="next_to_upload" src="../images/flower.gif" width="75px" height="75px" border="0"at="flower.gif" onclick="changePicture(this);" /><span><img src="../images/flower.gif" /><br /></span></a>
 <a class="thumbnail" href="#thumb"><img class="next_to_upload" src="../images/motivation.gif" width="75px" height="75px" border="0" at="motivation.gif" onclick="changePicture(this);" /><span><img src="../images/motivation.gif" /><br /></span></a>
 <a class="thumbnail" href="#thumb"><img class="next_to_upload" src="../images/blurredlights.gif" width="75px" height="75px" border="0"at="blurredlights.gif" onclick="
      changePicture(this);" /><span><img src="../images/blurredlights.gif" /><br /></span></a>
</div>

function changePicture(image) {
  var at = $(image).attr('at');
  var newpath = '../images/' + at;
  $("#img_prev").attr('src', newpath);
}

---

您可以使用CSS来实现这一点

a:active > img, a:focus > img , img:active, img:focus{
   border:2px solid #ccc;
}

如果您想使用JS，请将jQuery添加到您的文件中

$('#thumb_images').on('click' , 'a.thumbnail > img', function(){
    $('#thumb_images img').removeClass('active');
    $(this).addClass('active');
});

和CSS

img.active{border:2px solid #ccc;}

代码2：当您单击任何图像时，JS将向所选图像添加一个类，当您再次单击“其他”时，JS将从所有图像中删除所有class=active，并向单击的图像添加class=active。希望能有帮助

$'thumb_images'。点击，'a.thumbnail>img'，函数{ $'thumb_images img'。移除类'active'； $this.addClass'active'； }; img.active{border:2px solid ccc；}

---

编辑：我意识到当我点击页面上的其他地方时，边框消失了。有没有办法防止这种情况？我只想在选择其他图像时更改边框。@ScottMyers代码已更新。别忘了将jQuery脚本添加到html文件奇怪的是，当我选择不同的图像时，边框不会消失。有什么想法吗？你能用PIC fn doescode更新的内容更新你的问题吗。它会根据选定的图像更改图像的较大预览。