#(ハッシュ)で、Ajax でロードするページを切り替える

リンクの #(ハッシュ)で、Ajax でロードするページを切り替えられることがわかったのでメモ。やりたいこととしては、ページ内アンカーリンクのAjax版です。

サンプル

上記のリンクをクリックすると、外部html のhash1.htmlが読み込まれます。

リンクバーで、URLの後に、#?hash2 をつけると、外部html のhash2.html を読み込みます。また、#?hash3 とすると、hash3.html を読み込みます。

また、ページ内のリンクをクリックしても、Ajax で該当ベージをロードできます。

ディレクトリ構成は以下です。 Ajax でhtmlディレクトリの中の外部htmlファイルを読み込みます。

以下に、コードを貼りつけておきます。

やっていることとしては、

var hash = window.location.hash;

で、ブラウザのリンクバーのURLのハッシュ# を取得しています。取得したハッシュから該当ページをAjax でロードしています。

リンクバーのリンクのハッシュが変わったことは、以下のイベントでわかります。


window.onhashchange = function(){
  hash = window.location.hash;
...
}

また、以下のように、 a タグのリンク(href)をハッシュにしておき、


<li>
  <a href="#?hash1">#?hash1</a>
</li>
<li>
  <a href="#?hash2">#?hash2</a>
</li>
<li>
  <a href="#?hash3">#?hash3</a>
</li>

js側で、リンクがクリックされたら、 href のattribute(ハッシュ) を取得してAjax で外部html をロードできるようにします。


$('li').click(function(e){
  hash = $(this).children('a').attr('href');
}

こうすると、ページ内アンカーリンクのように、リンクバーにハッシュ付きのリンクが残ります。

ハッシュ付きのリンクになるので、ユーザに見せたいページを直接Ajaxでロードして見させることができます。また、以下のように、ブックマークにも追加することができます。

外部html であるhash2.html をロードして表示。
#?hash2:

外部html であるhash3.html をロードして表示。
#?hash3: