javascript - jQuery 不需要的向上滚动

Question

我有一堆描述 block ，它们应该在单击相应图像时淡入，淡出前一个图像。淡入淡出有效，但页面在每次点击时不断向上滚动，扰乱了用户的导航。

google.load("jquery", "1.3");
google.setOnLoadCallback(function() {
jQuery(function($) {

   $('#a').click(function(e){    
        $('#bio-b,#bio-c').fadeOut('slow', function(){
            $('#bio-a').fadeIn('slow');
        });
    });
});
});

我是一个 JavaScript/jQuery 菜鸟，主要是根据网上找到的代码拼凑而成的。我希望代码不全是倒退的。

编辑:这是在这种情况下将被单击的图像的 HTML:

<a href="#" id="a"><img></a>

描述:

<article id="bio-a" class="bio"></article>

和 CSS(描述不会在加载页面时显示)

#bio-a {
    display : none;
}

对造成这种情况的原因有何想法，如何解决？

Answer 1

使用 # 的 href 有效地意味着查找 id 为空的元素。显然你没有那个。要修复被“关注”的链接，您需要对传递给您的句柄的事件调用 preventDefault。

即:

$('#a').click(function(e){    
    $('#bio-b,#bio-c').fadeOut('slow', function(){
        $('#bio-a').fadeIn('slow');
    });
    e.preventDefault();
});