32

私は、(プロジェクトの制限により) 単一ページベースで動的コンテンツを持つ単純なアプリケーションに取り組んでいます。div動的コンテンツは理解できますが、URL のハッシュ値が変更されたときに a の html を変更するスクリプトを設定する方法がわかりません。

そのように機能するには、JavaScript スクリプトが必要です。

URL: http://foo.com/foo.htmldiv コンテンツ:<h1>Hello World</h1>

URL: http://foo.com/foo.html#foodiv コンテンツ:<h1>Foo</h1>

これはどのように機能しますか？

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

4

3 に答える 3

77

hashchangeイベントを聞くことができます：

$(window).on('hashchange',function(){ 
    $('h1').text(location.hash.slice(1));
});
于 2013-02-20T01:26:19.007 に答える
5

個人的には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/

于 2013-02-20T01:38:27.993 に答える