[英]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.