0

私は自分のサイトにハッシュ変更関数を設定しました。これにより、「概要」ページで6つの異なるセクションを切り替えることができます。これはうまく機能し、各セクションにハッシュを問題なく添付しました。
私が抱えている問題は、別のページからこれらのハッシュにリンクすると、関連するコンテンツを読み込めないことです。例：www.thisisawebsite.com/about/#section03
ハッシュは、aboutページを表示しているときに正常に機能します。 、しかし他のどこからでも、section01をロードするだけです。

jQuery(document).ready(function(){
jQuery('.about').hide();
jQuery('#section01').show();

jQuery(function(){
jQuery(window).on('hashchange', function(){
        var hash = window.location.hash;
     jQuery('.sub-menu').each(function(){
           jQuery('.about').hide();
         if (jQuery(this).attr('hook') === hash.replace('#section', '')) {
           jQuery('#section'+jQuery(this).attr('hook')).fadeIn();
           return false;
         }
    });  

});
});
jQuery(window).trigger('hashchange');
});

ハッシュ変更関数を使用したいという考え全体が6つの別々のページを持つ必要がなく、1つのページの各セクションを表示/非表示にして、ハッシュでそれらにリンクすることができたので、これを修正できますか？

4

1 に答える 1

1

ハッシュタグが既に存在するページをロードすると、ウィンドウの hashchange イベントはトリガーされますか? 問題がない場合は、各ループを別の関数にリファクタリングし、ドキュメントの準備ができたらそれを呼び出してハッシュタグが存在するかどうかを確認し、コンテンツをフェードインすることをお勧めします。

このようなもの (あなたの DOM を持っていないので試したことはありませんが、アイデアはわかるでしょう。

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('#section', '')) {
               jQuery('#section'+jQuery(this).attr('hook')).fadeIn();
                 return true;
             }
        });

        // no hash found, so let's show #section01
        jQuery('#section01').show();

        return false;
    }

    determineContent();
});

これが機能しない場合は、ajax イベントも処理する jQuery 用の優れたプラグインがあります。私はこれを js ベースの Web アプリケーションによく使用しています。

http://www.asual.com/jquery/address/

于 2013-02-20T09:45:12.187 に答える