var hashの例＃index2でdivをロードするには？

Question

その私のボタン：

<a href="#index2"></a> 
<div id="page-wrapper"></div> 
$("#index2").click(function(){ 
    $(document).ready(function() { 
     $('#page-wrapper').fadeOut('fast', function(){ 
      $('#page-wrapper').load("index2.php", function(){ 
       $('#page-wrapper').fadeIn('fast'); 
      }); 
     }); 
    }); 
}); 

そのが正常に動作しても問題ありませんが、ページが

をリフレッシュし、あなたがwww.domain.com/index.phpにページを更新するときだ場合、これは動作しません。ページ

INDEX2＃は、今どのように私は、リフレッシュに再びindex2.php#page-wrapperにロードすることができますか？

Answer 1

$(document).ready(function(){  
    if(window.location.hash == "#index2"){ 
     $('#page-wrapper').fadeOut('fast', function(){ 
      $('#page-wrapper').load("index2.php", function(){ 
       $('#page-wrapper').fadeIn('fast'); 
      }); 
     }); 
    }; 
}); 

Answer 2

＃アンカーの変更を処理するためにhashchangeイベントを使用するためのより良いアプローチでしょう。このようにしてみてください。

$(window).on('hashchange', function() { 
     var hash = window.location.hash; 
     var loadUrl = hash.substr(1) + ".php"; 
     $('#page-wrapper').fadeOut('fast', function(){ 
      $('#page-wrapper').load(loadUrl, function(){ 
       $('#page-wrapper').fadeIn('fast'); 
      }); 
     }); 
    }); 

最初のページのロードでhashchangeイベントを起動するには、あなたが試すことができます。

$(document).ready(function() { 
    if (window.location.hash) { 
     $(window).trigger('hashchange') 
    } 
});