將「活動」狀態添加到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/', '')); 
});