2

好吧，这快把我逼疯了！

我正在使用“类似标签”的子菜单来显示 3 个不同的表格。此子菜单中的每个链接隐藏当前内容并显示另一个内容。

注意：现在我将留下一个指向我正在处理的页面的直接链接，以便您可以自己检查问题。

为了避免<a>（锚）跳跃，我已经在尝试<a onclick="return false;">（这在我拥有的另一个站点中运行良好）。在我的 jQuery 代码中，我还使用了“e.preventDefault();” 这有助于避免跳转到页面顶部，但即使使用它，页面也总是会跳转到子链接上方的页面的某些部分。

我真的不知道我还能做些什么来避免这种跳跃。

现在这就是我在我的 html 中的内容：

<nav id="submenu" class="menu">
<ul>
    <li class="current-menu-item"><a onclick="return false;" href="#" rel="statics">Sites Estáticos</a></li>
    <li><a onclick="return false;" href="#" rel="dynamics">Sites Dinâmicos</a></li>
    <li><a onclick="return false;" href="#" rel="extras">Serviços Extras</a></li>
</ul>

这是我的 jQuery：

function subSections(){
$('nav.menu li a').click(function(e){
    e.preventDefault(); //this helps, but don't solve the problem
    var active = $(this).parent();
    var currSection = $(this).attr('rel');
    if(active.hasClass('current-menu-item')!=true){
        // Add and remove 'current-menu-item' class
        $('nav.menu .current-menu-item').removeClass('current-menu-item');
        active.addClass('current-menu-item');
        // Hide currentSection and Show the clicked one
        $('.showing').fadeOut('slow', function(){
            $('#'+currSection).fadeIn('slow').addClass('showing');
        }).removeClass('showing');
    }
});

}

此外，也许有更好的方法来做这种“显示和隐藏”的东西，但这似乎工作正常。好吧，如果有人能阐明这个问题并帮助我，我会很高兴！提前致谢！

4

2 回答 2

1

使用.show()and.hide()代替.fadeIn()and .fadeOut()。

如果你想保留动画，你可以尝试.show('slow')，.hide('slow')但这也可能引发跳跃问题。

于 2012-07-21T18:38:34.177 回答
1

此外，只是为了稍微重构代码并节省一些输入（并使脚本更加动态），您不需要onclick="return false;"在每个 html 链接上编写。只需将 return false 放在 jQuery 中 .click 函数的末尾即可。

function subSections(){
$('nav.menu li a').click(function(e){
    e.preventDefault(); //this helps, but don't solve the problem
    var active = $(this).parent();
    var currSection = $(this).attr('rel');
    if(active.hasClass('current-menu-item')!=true){
        // Add and remove 'current-menu-item' class
        $('nav.menu .current-menu-item').removeClass('current-menu-item');
        active.addClass('current-menu-item');
        // Hide currentSection and Show the clicked one
        $('.showing').fadeOut('slow', function(){
            $('#'+currSection).fadeIn('slow').addClass('showing');
        }).removeClass('showing');

    // Return false for all links in the nav onclick
    return false;

    }
});
于 2013-09-09T13:09:00.537 回答