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()と.hide()の代わりに.fadeIn()とを使用し.fadeOut()ます。

アニメーションを維持したい場合は、試し.show('slow')てみることもできますが.hide('slow')、それによってもジャンプの問題が発生する可能性があります。

于 2012-07-21T18:38:34.177 に答える
1

また、コードを少しリファクタリングして入力を少し節約する (そしてスクリプトをより動的にする) ためだけonclick="return false;"に、すべての html リンクに記述する必要はありません。jQuery の .click 関数の最後に return false を配置するだけです。

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 に答える