リンク（href）を無効にする

画面遷移のないWebサイトでもJSのない環境やSEOも考慮して href にリンク先を設定したいときがあります。

hmtl
<a href="hoge.html" id="btn">ボタン</a>

このような場合だと #btn にイベントを設定しても画面遷移してしまいます。
click イベントに「e.preventDefault()」と記述すればhrefを無効にになり画面遷移が行われません。

javascript
$('#btn').click(function(e){
  e.preventDefault();
});

id や href の値を取得する

ボタンをクリックしたとき id や href の値によって分岐させたいときがあります。
その場合は attr メソッドを使用することで属性値を取得することができます。

javascript
$('#btn').click(function(e){
  e.preventDefault();
  console.log($(this).attr('id'));  //btn
  console.log($(this).attr('href'));  //hoge.html
});

#(ハッシュ)の操作は location.hash を使う

画面遷移を行わないと同一のURLになってしまう、などのデメリットもあります。
location.hash を使用することで#(ハッシュ)の操作を行うことができます。
たとえばボタンをクリックしたときURLの末尾に「#test」を付加したい場合は次のようにします。

javascript
$('#btn').click(function(e){
  e.preventDefault();
  location.hash = 'test';
});

逆にハッシュ値を取得したい場合は location.hash をそのまま使います。

javascript
// index.html#test
var urlHash = location.hash;
console.log(urlHash);  //#test

location.hash をそのまま表示する場合はタグなどをエスケープします。

javascript
location.hash.replace(/<[^>]+>/g, '');

戻るボタンを押したときのイベント

画面に配置したボタンのイベントは簡単ですが、ブラウザの「戻る」「進む」ボタンのイベントは各ブラウザの違いもあり難しいですね。
hashchange event プラグインを使用することでURLの書き換えがあったタイミングでイベントを実行することができます。

Ben Alman » jQuery hashchange event

使い方はプラグインを読み込んだら次のように記述します。

javascript
$(window).hashchange( function(){
  console.log('チェンジ');
});

これで location.hash でURLを操作したときや、ブラウザの「戻る」「進む」ボタンを押したときに hashchange が実行されます。

HTMLl5ならpushState

HTML5の pushState を使用すれば、もう少しスマートなURLの書き換えができます。

AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた