JavaScriptを使用したURLのハッシュ値の変更を検出しました。

Question

私は単一ページベース（プロジェクトの制限のため）で動的コンテンツを持つ単純なアプリケーションを開発中です。私は動的コンテンツを理解しますが、私が理解していないのは、URLのハッシュ値が変更されたときにdivのhtmlを変更するスクリプトを設定する方法です。

私は、次のような動作するようにJavaScriptのスクリプトが必要になります。

URL：http://foo.com/foo.html divの内容：<h1>Hello World</h1>

URL：http://foo.com/foo.html#foo divの内容：<h1>Foo</h1>

どのようにこの作品は、でしょうか？

助けてください！ありがとう。

Answer 1

あなたはhashchangeイベントに耳を傾けることができます。

$(window).on('hashchange',function(){ 
    $('h1').text(location.hash.slice(1)); 
}); 

Answer 2

個人的に、私はあなたにハッシュタグをテンプレート（プレースホルダを追加し、それらを読み返すことができるよう）するための柔軟性を与えるsammyを使用すると思います。例えば

<script src="/path/to/jquery.js"></script> 
<script src="/path/to/sammy.js"></script> 
<script> 
    $(function(){ 
     // Use sammy to detect hash changes 
     $.sammy(function(){ 
      // bind to #:page where :page can be some value 
      // we're expecting and can be retrieved with this.params 
      this.get('#:page',function(){ 
       // load some page using ajax in to an simple container 
       $('#container').load('/partial/'+this.params['page']+'.html'); 
      }); 
     }).run(); 
    }); 
</script> 

<a href="#foo">Load foo.html</a> 
<a href="#bar">Load bar.html</a> 

の例では、ここで見つけることができます：http://jsfiddle.net/KZknm/1/