6

7 つの個別のページを持たずに、about ページのさまざまなセクションを表示/非表示にするように hashchange 関数を設定しています。これはすべて正常に機能しますが、実際には、関連するコンテンツが画面に表示されているときに気になる小さなことが 1 つあります。たとえば#about01、メニュー ボタンをもう一度クリックすると、ブラウザがこの div の先頭にジャンプします。起こりたくない。
これが私のjQueryです：

jQuery(document).ready(function(){

    jQuery(window).on('hashchange', function(){
        var hashFound = determineContent();
        if(hashFound) return false;
    });

    function determineContent(){

        var hash = window.location.hash;
        jQuery('.about').hide();

        jQuery('.sub-menu').each(function(){

             if (jQuery(this).attr('hook') === hash.replace('#about', '')) {
               jQuery('#about'+jQuery(this).attr('hook')).fadeIn();
                 return true;
             }
        });

        jQuery('html, body').animate({scrollTop:0}, 'slow');
        return false;
    }

    determineContent();
});

HTML:

<div id="sub-menu">
        <li id="sub-menu-01" class="sub-menu" hook="01"><a href="#about01">TEST</a></li>
        <li id="sub-menu-02" class="sub-menu" hook="02"><a href="#about02">TEST</a></li>
        <li id="sub-menu-03" class="sub-menu" hook="03"><a href="#about03">TEST</a></li>
        <li id="sub-menu-04" class="sub-menu" hook="04"><a href="#about04">TEST</a></li>
        <li id="sub-menu-05" class="sub-menu" hook="05"><a href="#about05">TEST</a></li>
        <li id="sub-menu-06" class="sub-menu" hook="06"><a href="#about06">TEST</a></li>
        <li id="sub-menu-07" class="sub-menu" hook="07"><a href="#about07">TEST</a></li>
    </div>

<div id="about01" class="about">CONTENT HERE
</div>

<div id="about02" class="about">CONTENT HERE
</div>

<div id="about03" class="about">CONTENT HERE
</div>

<div id="about04" class="about">CONTENT HERE
</div>

<div id="about05" class="about">CONTENT HERE
</div>

<div id="about06" class="about">CONTENT HERE
</div>

<div id="about07" class="about">CONTENT HERE
</div>

私が言うように、が表示され、ユーザーがもう一度#about01クリックすると、ウィンドウはこの div の一番上までスクロールします。これは、URL のハッシュの通常の動作です。#sub-menu-01デフォルトの動作を防ぎ、クリック時にこの div の一番上までスクロールしない方法はありますか? また、ページの読み込みなどを表示する代わりに
表示する方法があるかどうかを把握しようとしていますか?#about01www.website.com/aboutwww.website.com/about/#about01

4

4 に答える 4

0 
$("#id").click(function(event) {
    event.preventDefault();

    //do stuff
});

http://api.jquery.com/event.preventDefault/

于 2013-04-11T13:38:59.367 に答える
-1 
$('a').click(function(event){
    event.preventDefault();
});

はpreventDefault()、要素が持つすべてのデフォルト イベントを停止する必要があります。

http://api.jquery.com/event.preventDefault/

于 2013-04-11T13:38:49.667 に答える
-1

これを試して：

jQuery(window).on('hashchange', function(e){
    e.preventDefault();
    var hashFound = determineContent();
    if(hashFound) return false;
});

イベント オブジェクトのpreventDefault()メソッドは、その名前が示すように、そのイベントで実行されるデフォルトの動作を回避します。ハッシュが変更されたときの通常の動作を避けたいので、そのコードで行う必要があります。

于 2013-04-11T13:38:57.493 に答える