我已经为此苦苦挣扎了一段时间,但我无法提出解决方案。我有一个简单的 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上的页面以供参考。在此先感谢您的帮助。