下降到页面顶部

Question

我不想被拖到页面的顶部，当我推链接时，有什么问题？下面是HTML：

<div style="clear:both;"> 
<a rel="/documents/templates/bilgiteknolojileri/images/cin/1.jpg" class="image"><img src="/documents/templates/bilgiteknolojileri/images/cin/t1.jpg" class="thumb" border="0"/></a> 
<a rel="/documents/templates/bilgiteknolojileri/images/cin/2.jpg" class="image"><img src="/documents/templates/bilgiteknolojileri/images/cin/t2.jpg" class="thumb" border="0"/></a> 
<a rel="/documents/templates/bilgiteknolojileri/images/cin/3.jpg" class="image"><img src="/documents/templates/bilgiteknolojileri/images/cin/t3.jpg" class="thumb" border="0"/></a> 
<a rel="/documents/templates/bilgiteknolojileri/images/cin/4.jpg" class="image"><img src="/documents/templates/bilgiteknolojileri/images/cin/t4.jpg" class="thumb" border="0"/></a> 
<a rel="/documents/templates/bilgiteknolojileri/images/cin/5.jpg" class="image"><img src="/documents/templates/bilgiteknolojileri/images/cin/t5.jpg" class="thumb" border="0"/></a> 
</div> 
<div id="image"><img src="/documents/templates/bilgiteknolojileri/images/cin/1.jpg" border="0"/></div> 

这里是JavaScript：

$(function() { 
$(".image").click(function() { 
var image = $(this).attr("rel"); 
$('#image').hide(); 
$('#image').fadeIn('slow'); 
$('#image').html('<img src="' + image + '"/>'); 
return false; 
}); 
}); 

当我推的链接，大形象必须改变，它的变化，但在此之后它下降到顶部网页...如何解决它？甚至试图用锚，没有帮助，并添加的javascript：无效（0）

Answer 1

为什么使用rel属性而不是href？这样，您可以让没有启用javascript的用户在没有选项的情况下查看所有图片。

但是你的问题在于你的图像div容器每次重置为零高度，所以页面调整了一会儿，导致跳跃。在试图展示它之前，等到你的新图像加载完成也是一个好主意。

无论如何，我建议这样的代码（可在http://jsfiddle.net/4tV4E/1/）：

HTML：

<div style="clear:both;"> 
<a href="http://www.bilgiteknolojileri.net/documents/templates/bilgiteknolojileri/images/cin/1.jpg" class="image"><img src="http://www.bilgiteknolojileri.net/documents/templates/bilgiteknolojileri/images/cin/t1.jpg" class="thumb" border="0"/></a> 

<a href="http://www.bilgiteknolojileri.net/documents/templates/bilgiteknolojileri/images/cin/2.jpg" class="image"><img src="http://www.bilgiteknolojileri.net/documents/templates/bilgiteknolojileri/images/cin/t2.jpg" class="thumb" border="0"/></a> 

<a href="http://www.bilgiteknolojileri.net/documents/templates/bilgiteknolojileri/images/cin/3.jpg" class="image"><img src="http://www.bilgiteknolojileri.net/documents/templates/bilgiteknolojileri/images/cin/t3.jpg" class="thumb" border="0"/></a> 

</div> 
<div id="img_container"><img id="big_picture" src="http://www.bilgiteknolojileri.net/documents/templates/bilgiteknolojileri/images/cin/1.jpg" border="0"/></div> 

的Javascript：

$(document).ready(function() { 
    $('.image').click(function(event) { 
     event.preventDefault(); 
     var imagePath = $(this).attr("href"); 
     var newImg = new Image; 
     newImg.src = imagePath; 

     newImg.onload = function(){ 
      $('#img_container').css({ 
       width: newImg.width, 
       height: newImg.height 
      }); 

      $('#big_picture').hide(); 
      $('#big_picture').attr('src', imagePath); 
      $('#big_picture').fadeIn('slow'); 
     }; 
    }); 
}); 

Answer 2

不能100％确定（return false应该海事组织工作），但你也可以访问event对象：

$(".image").click(function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 
    var image = $(this).attr("rel"); 
    $('#image').hide(); 
    $('#image').fadeIn('slow'); 
    $('#image').html('<img src="' + image + '"/>'); 
}); 

参考：preventDefault，stopPropagation

更新：如果这不起作用的话，那可能是因为你没有为href属性设置一个值（我想preventDefault还要防止局部的跳跃，但也许它没有？ ）。将rel更改为href，它应该与上面显示的代码一起使用。

更新2：另一种只需要更改HTML的方法是将href="#image"添加到您的所有链接中。这使得浏览器跳转到div ID image。

Answer 3

我使用的方法是添加href="#;"。由于;锚（通常）不存在，滚动不会改变。