如何在使用jQuery淡入淡出选项显示或隐藏元素时阻止页面跳转到顶部

有很多问题,我试过了。

我在做什么

我正在使用jQuery fadeIn和fadeOut选项隐藏div并使用下面的jquery显示列表,但页面一直跳到顶部。 将显示的列表是动态的。

我试过e.preventDefault();return false; 但没用

我尝试将锚标记更改为span标记,但第二个onClick函数不起作用。

这是因为我的内容长度是动态的,使它看起来像跳跃还是真正的跳跃?

提前致谢。

HTML

 
20
CATEGORIES
1
Chef's Special
Lunch
Snacks
Dinner

JS

  $(document).ready(function(){ $('body').on('click', '.category', function(){ var category = $(this).data('categories'); //alert(category); $('.category').fadeOut(300); $.ajax({ type: "POST", url: "./assets/listproducts.php", data: {cat: category}, cache: false, success: function(response){ //console.log(response); $('#nav').html('<- BACK').addClass('back'); $('.items').html(response).delay(400).fadeIn(300); } }); }); $('.back').on('click', function(e){ $('.items').fadeOut(300); $('.category').html(response).delay(400).fadeIn(300); $('#nav').html('CATEGORIES').removeClass('back'); e.preventDefault(); }); });  

CSS

 ul.items { padding:0; margin:0; display:none; } 

你的第二个.back onclick永远不会开火。

它无论是时间(作为a还是span )都不起作用 – 当它是a ,默认点击将触发,它将带你到顶部。

这是因为当你调用$('.back').on('click'..) ,没有.back元素可以连接,因为你还没有将该类添加到后退按钮。

您需要使用事件委派: https : //stackoverflow.com/a/1688293/2181514

将您的活动连线更改为:

 $("document").on("click", ".back", function.... 

然后它将获取动态更改的类

我怀疑你的.back上的click事件.back完全注册,因为事件被绑.back.back不存在。 因此它与点击没有href链接一样好。

您需要委托点击.backdocument 。 需要此委派是因为您要动态添加back

  $(document).on('click','.back', function(e){ e.preventDefault(); $('.items').fadeOut(300); $('.category').html(response).delay(400).fadeIn(300); $('#nav').html('CATEGORIES').removeClass('back'); }); 

你应该在html5中做什么,使用没有href属性的锚标记。 在CSS中,您可以使用cursor: pointer来补偿它。 然后在JavaScript中突然不再需要event.preventdefault

一个hacky解决方案是在锚标记上设置href="#/" ,这将起作用。 但是,在不需要它们的情况下使用锚标签(如果你使用那么应该存在一些可点击链接)对于SEO来说不是一个好习惯。

此外,您可以使用e.preventDefault() ,但在所有函数上使用它,而不仅仅是在后退单击上。

但是,更好的做法是使用 ,消除那些跳跃问题并做更好的SEO。