使用JavaScript检测URL的哈希值的更改

Question

我正在开发一个简单的应用程序,它基于单页(由于项目限制)并具有动态内容.我理解动态内容没问题,但我不明白的是如何设置一个脚本,div当URL中的哈希值发生变化时,该脚本会更改a的html .

我需要一个JavaScript脚本来这样工作:

网址:http://foo.com/foo.htmldiv内容:<h1>Hello World</h1>

网址:http://foo.com/foo.html#foodiv内容:<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/