[英]Having Trouble With Page Reload After jQuery Function
我已经为此苦苦挣扎了一段时间,无法提出解决方案。 我有一个简单的jQuery函数,可以淡入和淡出餐厅菜单上的内容元素。 流行效果很好,但是运行时页面会重新加载并跳回到顶部。 我在这里找到了各种建议的解决方案,但没有一个起作用。 我用过return false; 和e.preventDefault(); 以及弄乱链接HTML将其更改为跨度和按钮,但没有一个起作用。 它在Wordpress上的自定义主题上,这是我拥有的HTML。
<div id="menu_nav">
<ul>
<li><a href="#" id="mainattraction" class="current-link menu-link">Main Attractions</a></li>
<li><a href="#" id="seafoodcombos" class="menu-link">Seafood Combo's</a></li>
<li><a href="#" id="harbouronaroll" class="menu-link">Harbour On A Roll</a></li>
<li><a href="#" id="meangreens" class="menu-link">Mean Greens</a></li>
<li><a href="#" id="appetizers" class="menu-link">Appetizers</a></li>
<li><a href="#" id="kidsmenu" class="menu-link">Kids Menu</a></li>
<li><a href="#" id="onthegrill" class="menu-link">On The Grill</a></li>
<li><a href="#" id="soups" class="menu-link">Soups</a></li>
</ul>
</div>
<div id="mainattractionscontent">
//content
</div>
<div id="seafoodcomboscontent">
//content
</div>
等等等
这是我当前正在使用的jQuery。
$('document').ready(function() {
$('.menu-link').click(function(event) {
var id = this.id + 'content';
var link = this.id;
$('.active').fadeOut(600, function(){
$('#' + id).fadeIn(600);
$('.active').removeClass('active');
$('#' + id).addClass('active');
$('.current-link').removeClass('current-link');
$('#' + link).addClass('current-link');
return false;
});
});
});
您也可以在http://theharboursportsbar.com/the-menu上查看该页面以供参考。 先谢谢您的帮助。
return false;
需要在“点击”处理程序中,而不是在淡出回调中。
$('.menu-link').click(function(event) {
var id = this.id + 'content';
var link = this.id;
$('.active').fadeOut(600, function(){
$('#' + id).fadeIn(600);
$('.active').removeClass('active');
$('#' + id).addClass('active');
$('.current-link').removeClass('current-link');
$('#' + link).addClass('current-link');
});
return false;
});
调用event.preventDefault();
也会起作用,但同样,它应该在“点击”处理程序中发生,而不是在动画回调中发生。
它实际上不是链接的默认性质。 Pointy是正确的,因为您应该将return false移到单击处理程序之外,但这不是这里的实际问题。
当您淡出内容时,页面会变得越来越小,足够小以至于大多数显示器/视口上的所有内容都可以放在一个页面上,因此它似乎“跳到了”顶部,而实际上,它只是显示所有可能的内容。 因此,基本上,您的问题在于fadeOut函数本身的性质,在fadeOut函数的末尾它设置了display:'none'
影响页面的布局。
尝试以下方法:
$('.menu-link').click(function(event) {
var id = this.id + 'content';
var link = this.id;
$('.active').animate({opacity:0},{duration:600, complete:function(){
$('#' + id).css('display','block').animate({opacity:1},{duration:600});
$('.active').removeClass('active').css('display','none');
$('#' + id).addClass('active');
$('.current-link').removeClass('current-link');
$('#' + link).addClass('current-link');
}});
return false;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.