jQueryで現在のリンクにクラスを付ける

PHPとかWPとかではなく、HTMLで静的なページを制作している場合、メニュー構造部分なんかは、そのページ毎に編集したりしないといけませんよね。

そんな時に、Dreamweaverではライブラリ機能が使えるのですが、ライブラリ機能を使うと、ページ毎に少し変えたい場合に変えれません。

<ul id="menu">
	<li><a href="index.html">HOME</a></li>
	<li><a href="cafe.html">Cafe</a></li>
	<li><a href="access.html">Access</a></li>
	<li><a href="contact.html">Contact Us</a></li>
</ul>

例えば上記のようなHTMLがライブラリとして登録されていると、指定してある全てのページに対して、同じコードが挿入されます。

でも、HOMEでは

<ul id="menu">
	<li><a href="index.html" class="active">HOME</a></li>
	<li><a href="cafe.html">Cafe</a></li>
	<li><a href="access.html">Access</a></li>
	<li><a href="contact.html">Contact Us</a></li>
</ul>

のように、Cafeページでは

<ul id="menu">
	<li><a href="index.html">HOME</a></li>
	<li><a href="cafe.html" class="active">Cafe</a></li>
	<li><a href="access.html">Access</a></li>
	<li><a href="contact.html">Contact Us</a></li>
</ul>

のように、現在表示されているページは「active」クラスを付与して、現在そこが表示されているというのがわかりやすいデザインを指定したい場合があります。

そんな時に使えるJavascriptです。

$(function(){
	var loc = location.href;
	var file = loc.substring(loc.lastIndexOf("/")+1,loc.length);
	$('a[href$="'+file+'"]').addClass('active');
});

「location.href」で現在のURLを取得して、そこから最後のファイル名部分だけを抽出します。
最後に、aタグのhref属性が、現在のファイル名で終わっているものがあれば、そのエレメントにaddClassでactiveを付加しています。

同じHTMLの中に、階層の違う同名ファイルへのリンクがあるとマズいですが、そうでなければ、これでOKです。