激活/单击时在图像周围创建边框答案

【问题标题】：Create a border around image when active/clicked激活/单击时在图像周围创建边框
【发布时间】：2015-08-31 18:40:20
【问题描述】：

我想让我的网站访问者从 3 张不同的图片中进行选择，而我现在想要的是当他们选择时，图片周围有一个边框，所以基本上是当它处于活动状态时。

我希望我在寻找什么是可以理解的。有人可以帮助我吗？

我试图在 Google 上找到一些东西，但没有成功。

【问题讨论】：

我知道这很容易我只是不知道如何实现它。我只需要在单击的图像周围设置一个简单的边框样式。仅此而已！
也许是这样jsfiddle.net/soledar10/ww3ofL6c

标签： css image border

【解决方案1】：

这个选项合适吗？

input{
    display: none;
}

label{
    display: inline-block;
    width: 100px;
    height: 100px;    
    position: relative;
    border: 4px solid transparent;
}
input:checked + label{
    border: 4px solid #f00;     
}

<input type="radio" id="r1" name="radio" />
<label for="r1">
    <img src="http://www.auto.az/forum/uploads/profile/photo-thumb-1.jpg?_r=1431896518" alt="" />
</label>

<input type="radio" id="r2" name="radio" />
<label for="r2">
    <img src="http://www.auto.az/forum/uploads/profile/photo-thumb-1.jpg?_r=1431896518" alt="" />
</label>

<input type="radio" id="r3" name="radio" />
<label for="r3">
    <img src="http://www.auto.az/forum/uploads/profile/photo-thumb-1.jpg?_r=1431896518" alt="" />
</label>

【讨论】：

【解决方案2】：

一种方法是使用一些 jQuery 为被点击的图像添加边框样式。

<div>
    <img src="http://placehold.it/400x200" />
</div>

$('img').click(function () {
    $(this).css('border','1px solid black');
});

See the JSfiddle

【讨论】：

【解决方案3】：

这将解决您的问题.....我假设“image_class”是您图像的 css 类。

     $('.image_class').click(function() {  
     $('.image_class').css("border","none");    
     // this border from other  image   
$(this).css("border","1px solid grey");  
// add border to clicked image });

【讨论】：

谢谢。如何设置它，以便始终只有 1 个图像可以有边框？
您只需为所有图像添加相同的类名，此代码即可处理
你是按照 sumit 做的吗，请保留一些示例代码，以便我们根据您的代码提供帮助
如果此答案与您的问题相关，那么请接受答案....@AlecWildenstein