URLにハッシュ（#）を付けて取得操作する方法【jQuery】

URLにハッシュ（#）を付けてページURLを取得操作する方法をご紹介します。現在のページを別ページURLに切替えるのではなくURLだけ切り替えられるのでページ読込をせずにコンテンツ操作したい時に使えます。

URLにハッシュ（#）を付けて取得操作するCSSの記述

※#idHshエリアをクリックするとURLにハッシュ（#）を付けます。必要に応じて変更して下さい。

<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>

URLにハッシュ（#）を付けて取得操作するJavaScriptの記述例

※jquery.min.jsとhash.jsファイルを読み込みます。#idHshエリアをクリックするとURLにハッシュ（#）を付けます。Hash.on(“#+URLに追加する文字”)でURLを操作します。

<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+" でパスは "+path+"です。');
	});

});
</script>

hash.jsソース元

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

URLにハッシュ（#）を付けて取得操作するHTMLの記述

※#idHshエリアをクリックするとURLにハッシュ（#）を付けます。必要に応じて変更して下さい。

<div id="idWrap">
	<h1>下のエリアをクリックするとURLに任意のハッシュが付きます。</h1>
	<div id="idHsh">
		<p>このエリアをクリック</p>
	</div><!--/idHsh-->
</div>

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

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

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

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。