HTML5 カスタムデータ属性とjQueryを使用したカレント表示

仕様

色々なカレント表示方法がありますが、カスタムデータ属性とjQueryを使用した場合の処理です。
カスタムデータに任意で登録できるので、リンク先URL（href属性）とカレント表示させたいURLが異なる場合や、複数ディレクトリが同一カレント表示の場合などに対応させやすいかと思います。
下記サンプルはクラス付与のみなので、cssにてのスタイル調整か画像をロールオーバーさせるスクリプトのカスタマイズ等していただければと思います。

ソース

■Javascript

$(function() {
  $('#gnav .target').each(function(){
    var url = $(this).data('link');
    if(location.href.match(url)) {
       $(this).addClass('current');
    } else {
       $(this).removeClass('current');
    }
  });
});

※jQueryを使用しますので適宜読み込んでください

■HTML

<nav id="gnav">
  <ul>
    <li><a href="#" class="target" data-link="dir01">nav01</a></li>
    <li><a href="#" class="target" data-link="dir02">nav02</a></li>
    <li><a href="#" class="target" data-link="dir03">nav03</a></li>
    <li><a href="#" class="target" data-link="dir04">nav04</a></li>
  </ul>
</nav>

※マークアップは適当なのであしからず