【jQuery】ナビゲーションでの現在位置

ナビゲーション上で現在いるページを示すボタンにだけ、「今ココ」な装飾をつけたいときの処理。

最初ココをを見つけて、あーこれこれー、と軽い気持ちで利用しようとしたらなんかうまく行かない。ので、ちょっとアレンジ。

jQuery(document).ready(function() {
	if(location.pathname != "/") {
		var now = location.href.split('/');
		var endDir = now.slice(now.length-2,now.length-1);
		jQuery('ul#navigation li a[href$="'+endDir+'/"]').addClass('active');
	}
});

少々回りくどいですが now にまず現在のURLを " / " ごとに分割した配列にして代入。でもってその配列の最後にくる文字列を endDir に保存。つまり今たとえば

http://www.hogehoge.com/hello/myname/

という URL のページにいるとすると、now には ' http:,,hogehoge.com,hello,myname ' という値が入ってて、その最後にある myname をendDir に保存してる。

でもって指定した<a>タグの href の文字列の末尾と照らし合わせて、マッチするかどうかの判定して、マッチしたら class="active" を追加という命令をしてるので、css で active 要素に対する処理を好きなようにかけばOK。