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：void（0）

Answer 1

不是100％肯定（return false应该工作imo），但您也可以访问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的{{1}}。

Answer 2

为什么使用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 3

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

落到页面顶部

3 个答案: