URLにハッシュ(#)を付けたり・取得したり操作する方法



ページ自体を別ファイルで切替えるのではなく、URLにハッシュ(#)をつけて
ページURLを操作する方法です。

1.CSSの記述例

<style type="text/css">
<!--
#idHsh{
	cursor:pointer;
	margin:auto;
	width:150px;
	height:150px;
	border:dotted 1px #333333;
}
p{
	padding-top:50px;
	font-size:14px;
}
-->
</style>

2.JavaScriptの記述例

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="hash.js"></script>
<script type="text/javascript">
$(function(){

	var cnt=1;

	$("#idHsh").click(function(){
		Hash.go('/page/'+cnt);
		cnt=cnt+1;
	});

	Hash.on('/page/([0-9]+)$',
		function(path, parts) {
		alert('URLに付くハッシュは '+parts[1]+' でパスは '+path+'です。');
	});

});
</script>

ハッシュ関連のプラグインは色々出てる様ですが、今回は
ソース元:GitHub:hash.js
を使用しました。

3.HTMLの記述例

	<div id="idHsh">
		<p>このエリアをクリック</p>
	</div><!--/idHsh-->

URLにハッシュ(#)を付けたり・取得したり操作するデモ

1ページ内でコンテンツの切替りを行うJavaScriptのサイト等で
ブラウザの戻る(ヒストリーバック)もやりたい時や、
URLが1ページでも違う様にできるのでSEO的にも
複数ページとして認識されて良いのかな?
とちょっと思いました。