如何将边框设置为当前显示边框

Question

我正在使用Shopify嫉妒主题。我有多个产品图片。我想给图像显示为主图像的拇指图像添加边框。总之，当前的图像应该有边框。

下面是示例图像我想要的东西：

小图像多个不同的拇指图像。如果拇指图像在主要大图像中显示，则该拇指应该具有边框。

这是我的jQuery：

$('a.image-swap').click(function() { 
    var newImage = $(this).attr('href'); 
    $('.featured-image-div img').attr({ src: newImage }); 
    return false; 
}); 

Answer 1

根据你的代码试试这个：

$('a.image-swap').click(function() { 
var newImage = $(this).attr('href'); 
$('.featured-image-div img').attr({ src: newImage }); 
$('a.image-swap').removeClass('active'); 
$(this).addClass('active'); 
return false; 

希望将工作... :)

Answer 2

因此你使用jQuery来交换图像，你可以只添加一个CSS类 “主动” 的显示大拇指：

你的JavaScript：

$('#your-element').hover(function() { 
    // Your stuff for exchanging the image 
    $(this).addClass('active'); 
}); 
$('#your-element').mouseleave(function() { 
    $(this).removeClass('active'); 
}); 

你的CSS：

.thumb.active { 
    border: 2px solid black; 
}