Question

我有一个供用户选择的图片库。我希望他们选择的那个用边框勾勒出来。我假设这将用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);
}

Answer 1

你可以使用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将向所选图像添加一个类，当您单击其他位置时，它将从所有图像中删除所有class = active并将click = active添加到所单击的图片。希望它有所帮助

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thumb_images" class="gallerycontainer" >
 <a class="thumbnail" href="#thumb"><img src="http://a-z-animals.com/media/animals/images/100x100/temperate_forest.jpg" width="75px" height="75px" border="0"at="white.gif" onclick="changePicture(this);" /><span><img src="http://a-z-animals.com/media/animals/images/100x100/temperate_forest.jpg" /><br /></span></a>
 <a class="thumbnail" href="#thumb"><img class="next_to_upload" src="http://gofoxfire.com/wp-content/uploads/2014/10/05-HAMILTON-FOREST-004-100x100.jpg" width="75px" height="75px" border="0" at="travel.gif" onclick="changePicture(this);" /><span><img src="http://gofoxfire.com/wp-content/uploads/2014/10/05-HAMILTON-FOREST-004-100x100.jpg" /><br /></span></a> 
 <a class="thumbnail" href="#thumb"><img class="next_to_upload" src="http://gofoxfire.com/wp-content/uploads/2014/10/02-URBAN-FOREST-001-100x100.jpg" width="75px" height="75px" border-radius="25px" at="coffee.gif" onclick="changePicture(this);" /><span><img src="http://gofoxfire.com/wp-content/uploads/2014/10/02-URBAN-FOREST-001-100x100.jpg" /><br /></span></a>
</div>

围绕选定的图库图像边框

1 个答案: