與jQuery縮略圖庫行爲卡住

Question

我正嘗試用jQuery創建一個簡單的縮略圖查看器。這裏有雲代碼：

 $(function(){ 
     $("ul.thumbnails li").click(function(e){ 
     var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image 
     var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL 
     $("img.featured").attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag) 
     }); 

     <div class="image-gallery"> 

    <img class="featured" src="big.jpg"> 

    <ul class="thumbnails"> 

    <li id="thumb01"> 
     <a href="big.jpg"><img src="small.jpg"></a> 
    </li> 
    <li id="thumb02"> 
     <a href="big.jpg"><img src="small.jpg"></a> 
    </li> 
    <li id="thumb03"> 
     <a href="big.jpg"><img src="small.jpg"></a> 
    </li> 
</ul> 

.thumbnails li { 
margin: 0; 
padding: 5px 5px 0 5px; 
list-style: none; 
float: left; 
overflow: hidden; 
} 

thumbnails li img { 
width: 50px; 
height: 50px; 
margin: 0; 
padding: 0; 
float: left; 
} 

如果我點擊縮略圖，瀏覽器直接轉到完整的圖像，而不是僅僅改變與jQuery的IMG SRC。但是，如果我點擊<li>內的某個地方，它的工作原理。

我知道這一定很簡單，但我不知道我要出錯的地方。我試圖學習其他畫廊，如http://www.sohtanaka.com/web-design/examples/image-rotator/，但找不到我想念的東西。

我真的可以使用一些幫助，從你們:)

Answer 1

這是因爲你需要從該鏈接時將圖像停止瀏覽器。您可以使用阻止當前事件操作的preventDefault函數來執行此操作。在這種情況下「點擊」。

$(function(){ 
    $("ul.thumbnails li").click(function(e){ 
    var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image 
    var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL 
    $("img.featured").attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag) 

    e.preventDefault(); //Stop browser default behaviour 

    }); 

Answer 2

設置新源後確保點擊功能return false;爲了防止默認的瀏覽器行爲。