如何为当前显示的边框赋予边框答案

【问题标题】：How to give border to to current displaying border如何为当前显示的边框赋予边框
【发布时间】：2015-12-26 10:09:43
【问题描述】：

我正在使用 Shopify envy 主题。我有多个产品图片。我想为显示为主图像的拇指图像提供边框。简而言之，当前图像应该有边框。

这是我想要的示例图片：

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

这是我的 jQuery：

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

【问题讨论】：

我猜你正在使用一些 JavaScript 在上方的预览框中显示拇指？
是的，我正在使用 jquery，但如何给类（活动到那个拇指）

标签： html css shopify

【解决方案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;

希望会奏效... :)

【讨论】：

【解决方案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;
}

【讨论】：