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="https://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>

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

3．HTMLの記述例

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

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

1ページ内でコンテンツの切替りを行うJavaScriptのサイト等でブラウザの戻る（ヒストリーバック）もやりたい時や、URLが1ページでも異なるのでSEO的にも複数ページとして認識されて良いのかなぁ。どうなんだろ。