Question

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

我希望我能找到的是可以理解的。也许有人可以帮助我吗？

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

Answer 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>

Answer 2

这将解决您的问题.....我假设'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 });

Answer 3

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

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

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

See the JSfiddle

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

3 个答案: