将“活动”状态添加到Javascript

Question

我正在尝试将一个“活动”类添加到我在网上找到的图像交换脚本中。该脚本适用于我需要做的事情，但我需要设置所选图像的缩略图。我认为添加“主动”会让这个更容易，并且需要一些帮助。

我使用下面的脚本：

<script type="text/JavaScript"> 
// prepare the form when the DOM is ready 
$(document).ready(function() { 
    $("#gallery li img").click(function(){ 
     $('#main-img').attr('src',$(this).attr('src').replace('thumb/', '')); 
    }); 
    var imgSwap = []; 
    $("#gallery li img").each(function(){ 
     imgUrl = this.src.replace('thumb/', ''); 
     imgSwap.push(imgUrl); 
    }); 
    $(imgSwap).preload(); 
}); 
$.fn.preload = function() { 
    this.each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
} 
</script> 

下面是HTML：

<div id="gallery"> 
    <ul> 
     <li><img src="gallery/thumb/img_1.jpg" alt="" /></li> 
     <li><img src="gallery/thumb/img_2.jpg" alt="" /></li> 
     <li><img src="gallery/thumb/img_3.jpg" alt="" /></li> 
     <li><img src="gallery/thumb/img_4.jpg" alt="" /></li> 
    </ul> 
    <img src="gallery/img_1.jpg" alt="" id="main-img" /> 
</div> 

请让我知道如果我不解释自己不够清晰。我感谢帮助！

Answer 1

变化：

$("#gallery li img").click(function(){ 
    $('#main-img').attr('src',$(this).attr('src').replace('thumb/', '')); 
}); 

到

$("#gallery li img").click(function(){ 
    $("#gallery li img").removeClass('active'); 
    $(this).addClass('active'); 
    $('#main-img').attr('src',$(this).attr('src').replace('thumb/', '')); 
});