jQuery不需要向上滚动

Question

我有一堆描述块，当点击相应的图像时，它们应该淡入，淡出前一个。 淡入淡出正在工作，但页面在每次单击时都会向上滚动，弄乱用户的导航。

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 noob，大多数是从网上找到的代码拼凑而成的。 我希望代码不是全部倒退。

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

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

描述：

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

和CSS（加载页面时不显示说明）

#bio-a {
    display : none;
}

是什么导致这个问题的想法，如何解决？

Answer 1

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

即：

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

Answer 2

尝试从链接中删除href="#"属性，这可能会触发页面滚动。 此行为本身并未在HTML标准中定义 ， <a href="#">基本上只指向相对源，并且由浏览器供应商实现行为（某些浏览器甚至可能会重新加载页面）。 大多数开发人员倾向于使用这些元素，因为他们要么懒得设置cursor: pointer元素上的cursor: pointer还是有一些遗留的onclick处理程序......

并帮自己一个忙，并使用最新版本的jQuery（1.10或2.0，但不要忘记在升级之前阅读jQuery 2.0的免责声明 ）。 ;-)

Answer 3

我相信这就是你要找的东西。 如果我不正确地理解你，请告诉我，我会调整我的答案：

$(document).ready(function(){

 $('.image').click(function(){    
   var findIdNumber = $(this).attr("id");
   $('#bio-' + findIdNumber).fadeIn();
   $("article").not('#bio-'+findIdNumber).fadeOut();     
  });
});

的jsfiddle