当 active/clicked 时在图像周围创建边框

Question

我想让我的网站访问者 select 来自 3 个不同的图像，我现在想要的是当他们 selected 时图像周围的边框，所以基本上 当它活跃.

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

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

Answer 1

这将解决您的问题.....我假设 'image_class' 是您图片的 css class。

     $('.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 });

Answer 2

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

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

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

See the JSfiddle

Answer 3

这个选项合适吗？

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>

当 active/clicked 时在图像周围创建边框

Create a border around image when active/clicked

css

image

border