圍繞創建圖像的邊框時，主動/點擊

Question

我想讓我的網站訪問者來自3個不同的圖像選擇什麼，我現在想的是圖像周圍的邊框時，他們選擇的，所以基本上時，它的活躍。

我希望這是可以理解我所期待的。有人可以幫助我嗎？

我試圖找到谷歌的東西，但沒有運氣。

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