URLにハッシュ(#)を付けたり・取得したり操作する方法
- 2019.05.28
- JavaScript jQuery
- #ハッシュ, hash.js

ページ自体を別ファイルで切替えるのではなく、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-->
1ページ内でコンテンツの切替りを行うJavaScriptのサイト等でブラウザの戻る(ヒストリーバック)もやりたい時や、URLが1ページでも異なるのでSEO的にも複数ページとして認識されて良いのかなぁ。どうなんだろ。
-
前の記事
PHPで画像を小さくリサイズし、容量も減らす方法(convert -resize) 2019.05.27
-
次の記事
jquery.flexslider.js:スワイプ(swipe)に対応した画像スライダー 2019.05.29