单击图库中的链接会导致页面跳转？

Question

请原谅措辞不好的标题，希望我能在这里解释这个问题。

我已经在jQuery中编写了一个简单的图库控件，有六个图像和两个按钮控件，允许用户循环浏览图像的总集合。我有这部分工作正常，但每当我点击一个按钮来移动集合页'跳/滚动'自动到页面的顶部？我试着给画廊容器固定高度，因为我有这之前，我设法解决这样类似的问题，但是这并没有帮助：

这里是jQuery的：

var index = 0; 
$(function() { 
    $('#btnLeft').click(function() { 
     if (index != 0) { 
      index--; 
      $('#sixth').attr('src', $('#fifth').attr('src')); 
      $('#fifth').attr('src', $('#fourth').attr('src')); 
      $('#fourth').attr('src', $('#third').attr('src')); 
      $('#third').attr('src', $('#second').attr('src')); 
      $('#second').attr('src', $('#first').attr('src')); 
      $('#first').attr('src', '/Content/Images/Gallery/Thumbs/' + parseInt(index + 1) + '.png'); 
     } 
    }); 

    $('#btnRight').click(function() { 
     if (parseInt(6 + index) != 10) { 
      index++; 
      $('#first').attr('src', $('#second').attr('src')); 
      $('#second').attr('src', $('#third').attr('src')); 
      $('#third').attr('src', $('#fourth').attr('src')); 
      $('#fourth').attr('src', $('#fifth').attr('src')); 
      $('#fifth').attr('src', $('#sixth').attr('src')); 
      $('#sixth').attr('src', '/Content/Images/Gallery/Thumbs/' + parseInt(6 + index) + '.png'); 
     } 
    }); 
}); 

这里加价：

<div id="gallerySlider" style="height: 160px;"> 
    <img id="first" src="/Content/Images/Gallery/Thumbs/1.png" alt="Image" width="160" height="160" style="float:left;" /> 
    <img id="second" src="/Content/Images/Gallery/Thumbs/2.png" alt="Image" width="160" height="160" style="float:left;" /> 
    <img id="third" src="/Content/Images/Gallery/Thumbs/3.png" alt="Image" width="160" height="160" style="float:left;" /> 
    <img id="fourth" src="/Content/Images/Gallery/Thumbs/4.png" alt="Image" width="160" height="160" style="float:left;" /> 
    <img id="fifth" src="/Content/Images/Gallery/Thumbs/5.png" alt="Image" width="160" height="160" style="float:left;" /> 
    <img id="sixth" src="/Content/Images/Gallery/Thumbs/6.png" alt="Image" width="160" height="160" style="float:left;" /> 

    <a id="btnLeft" style="position:relative; float:left; bottom:105px;" href="#"><img src="/Content/Images/Design/leftbutton.png" alt="Left Button" /></a> 
    <a id="btnRight" href="#" style="position:relative; float:right; bottom:105px;"><img src="/Content/Images/Design/rightbutton.png" alt="Right Button" /></a> 
</div> 

任何人都可以提供建议吗？

感谢

Answer 1

使用.preventDefault()像以下停止浏览器默认加载和跳跃：

$('#btnLeft').click(function (e) { 

     e.preventDefault(); 

     if (index != 0) { 
      index--; 
      $('#sixth').attr('src', $('#fifth').attr('src')); 
      $('#fifth').attr('src', $('#fourth').attr('src')); 
      $('#fourth').attr('src', $('#third').attr('src')); 
      $('#third').attr('src', $('#second').attr('src')); 
      $('#second').attr('src', $('#first').attr('src')); 
      $('#first').attr('src', '/Content/Images/Gallery/Thumbs/' + parseInt(index + 1) + '.png'); 
     } 
    }); 

    $('#btnRight').click(function (e) { 

     e.preventDefault(); 

     if (parseInt(6 + index) != 10) { 
      index++; 
      $('#first').attr('src', $('#second').attr('src')); 
      $('#second').attr('src', $('#third').attr('src')); 
      $('#third').attr('src', $('#fourth').attr('src')); 
      $('#fourth').attr('src', $('#fifth').attr('src')); 
      $('#fifth').attr('src', $('#sixth').attr('src')); 
      $('#sixth').attr('src', '/Content/Images/Gallery/Thumbs/' + parseInt(6 + index) + '.png'); 
     } 
    });