如何將邊框設置爲當前顯示邊框

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; 
}