Javascript 获取单击时在主框中显示的预览图像

我一直在寻找一种方法，例如，每当我单击左侧的图像预览时，它将仅在主框（较大的框）中显示我单击的图像。我尝试过使用数据目标和Id来完成这项工作，但我感到困惑，不知道如何继续，因为什么都不起作用

有人知道我怎样才能做到吗

$（文档）.ready（函数（）{
$（'.thumb image'）。单击（函数（）{
var active=$（'.thumb image.active'）；//获取具有活动类的元素
var image=$（this.find（'img'）；//获取单击的图像
var imageUrl=image.attr（'src'）；//获取图像的src
active.removeClass（'active'）；//删除当前活动类
$（this）.addClass（'active'）；//将活动类添加到单击的图像
$（'#big image'）.css（'background-image'，'url（'+imageUrl+'））；//将imageUrl传输到主框
}); 
});
。左栏{
宽度：48.27586%；
浮动：左；
保证金权利：3.44828%；
最大宽度：100%；
左边距：自动；
右边距：自动；
}
.左上校：之后{
内容：“；
显示：块；
明确：两者皆有；
}
.左大拇指{
宽度：15.25424%；
浮动：左；
保证金权利：1.69492%；
}
.左栏拇指a{
-moz转换：所有0.3秒都易于输入输出；
-o-过渡：所有0.3秒的缓进-缓出；
-webkit过渡：所有0.3轻松输入输出；
过渡：所有0.3秒的缓进缓出；
-moz边界半径：1px；
-webkit边界半径：1px；
边界半径：1px；
边框：1px实心#E2E3；
显示：块；
边缘底部：8px；
位置：相对位置；
宽度：100%；
}
.选项卡内容{
溢出：隐藏；}
.tab内容img{
宽度：100%；
-webkit动画名称：不透明度；
动画名称：不透明度；
-webkit动画持续时间：.3s；
动画持续时间：.3s；}
.左柱拇指a.激活{
边框颜色：#086fcf；
}
.左柱拇指a.激活：悬停{
边框颜色：#086fcf；
}
.左列拇指a:悬停{
边框颜色：#b5b6bd；
}
.左柱拇指img{
显示：块；
宽度：100%；
}
.左col.大{
宽度：83.05085%；
浮动：对；
右边距：0；
}
.左col.大的，img{
-moz转换：所有600毫秒都减少0秒；
-o型过渡：所有600毫秒均为0秒；
-webkit过渡：所有600毫秒的缓速；
-webkit转换延迟：0秒；
过渡：所有600毫秒缓解0秒；
-moz变换：translateY（0px）；
-ms变换：translateY（0px）；
-webkit转换：translateY（0px）；
变换：translateY（0px）；
-moz边界半径：1px；
-webkit边界半径：1px；
边界半径：1px；
背景：透明无重复中心；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
-webkit背景尺寸：封面；
背景尺寸：封面；
边框：1px实心#E2E3；
显示：块；
身高：0；
不透明度：1；
垫底：133%；
}
.产品细节.左栏.大.动画{
-moz转换：所有0毫秒都会从0毫秒变慢；
-o型过渡：所有0毫秒都会从0毫秒变慢；
-webkit过渡：所有0毫秒的缓变；
-webkit转换延迟：0秒；
过渡：所有0毫秒缓解0毫秒；
-moz变换：translateY（-30px）；
-ms变换：translateY（-30px）；
-webkit转换：translateY（-30px）；
转换：translateY（-30px）；
不透明度：0；
}
我已删除拇指图像的href属性

请尝试以下脚本：

<script>
     $(document).ready(function(){
         $('.thumb-image').click(function(){
               var active = $('.thumb-image.active'); //get the element that has active class
               var image = $(this).find('img'); //get the clicked image
               var imageUrl = image.attr('src'); //get the src of the image
               active.removeClass('active'); //remove current active class
               $(this).addClass('active'); //add active class to clicked image
               $('#big-image').css('background-image', 'url(' + imageUrl + ')'); //transfer imageUrl to the main box
         }); 
     });
</script>


$（文档）.ready（函数（）{
$（'.thumb image'）。单击（函数（）{
var active=$（'.thumb image.active'）；//获取具有活动类的元素
var image=$（this.find（'img'）；//获取单击的图像
var imageUrl=image.attr（'src'）；//获取图像的src
active.removeClass（'active'）；//删除当前活动类
$（this）.addClass（'active'）；//将活动类添加到单击的图像
$（'#big image'）.css（'background-image'，'url（'+imageUrl+'））；//将imageUrl传输到主框
}); 
});
问题是您的缩略图包含在

我在您的代码中没有看到任何JavaScript。你忘了寄了吗？你在使用库吗？是的，我在使用引导库，但我添加了一个脚本。我添加了这个脚本，但它工作正常。当我点击图片时，它并没有打开它，在主要的大盒子里，非常感谢。这正是我要找的！
<a class="thumb-image active"  data-target="#pic-1" data-toggle="tab" href="//cdn.shopify.com/s/files/1/1047/6452/products/product_1024x1024.png?v=1446769025" data-index="0">
  <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/product_150x150.png?v=1446769025" alt="Tommy Hilfiger T-Shirt New York"></span>
</a>