昨日やっていたHTML5とJavaScriptの切っても切れない関係/CPI x CSS Nite「After Dark」（1）で紹介されていたjQuery hashchange event のデモを早速作ってみました。
https://torounit.com/demo/hashtag/
1/24:スクリプトエラーを修正しました。
制作に当たっては5509様のところの
Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン
を参考にさせてもらっていますです。
[js]
$(function(){
$(window).hashchange(function() {
$("hoge").load(location.hash.replace(‘#’, ”)+ "hogehoge");
});
$(window).hashchange();
$("a").each(function(){
var setHref = $(this).attr("href").replace("http://hoge.com", "#");
$(this).attr({href:setHref})
});
});
[/js]
のように使います。
追記：学び処 立志塾様のサイト制作で活用させて頂きました。
aタグのhrefのドメインを削除して代わりに#を入れています。これで、画面遷移が無くなります。
ソースに直接#を書くとjs非対応の場合に不都合が出てくるので、jsで置換します。
js無しの場合は普通にリンクで飛ぶようにしてあげています。
このやり方だと、直接内部のページに飛んだときにjsで#付きにリダイレクトさせてあげる必要があります。
また、ソースに記述する場合、#の代わりに#!を用いると、Googleはトラッキングしてくれるようです。サイトによって選択してゆく必要がありそうですね。
ただし、そんな必要があるのってtwitterのようなwebアプリとかですかね。
やはり画面遷移を無しにコンテンツを見せることができるというのはかなり大きなメリットになるのではないですかね。。。
しかし、これhashchangeって言うんですね。知らなかった。というか、名前がわからないからどう調べていいかわからなかったという。。。