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标准中的这种行为is not defined本身<a href="#">基本上只指向相对来源，并且由浏览器供应商来实现行为（某些浏览器甚至可能会重新加载页面）。大多数开发人员倾向于使用这些元素，因为他们要么懒得在元素上设置cursor: pointer，要么有一些遗留的onclick处理程序......

并帮自己一个忙，并使用最新版本的jQuery（1.10或2.0，但不要忘记在升级之前阅读disclaimer for 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

jQuery不需要向上滚动

3 个答案: