ナビゲーションのカテゴリを自動でアクティブにする（テキスト版）

jQuery2010年11月12日

以前こちらの記事でナビゲーションを自動でアクティブ化する、という記事を書きました。
前回は画像で実装しておりましたが、先日設計する際にテキストで自動アクティブ化する必要性を迫られたため、実際の案件で実装してみました。
せっかくなのでご紹介したいと思います。ソースは下記の様になります。

HTML

<ul id="nav">
<li><a href="/category1/">メニュー1</a></li>
<li><a href="/category2/">メニュー2</a></li>
<li><a href="/category3/">メニュー3</a></li>
</ul>

Javascript

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

処理としては、現在地のURLと「id="nav"」の中にあるhrefの中身が一致すれば、それを括っているliにclass="active"を付加する、というものです。

別にページ毎にclass="active"を記述してあげればわざわざJavascriptでこういったことをする必要もないっちゃ無いですが、システムが組み込まれるような場合、下層ページはカテゴリ問わず同じテンプレートを使用する、というケースがしばしばあります。そのような場合にこの処理をしておいてあげれば、システムを組み込む人にもしかしたら喜ばれるかもしれません。

あとは数百～数千ページの大規模サイトを作る際にページ毎なんてやってらんねー！という時にも重宝するかもしれません。

この記事を読んでいる方にオススメの記事

「jQuery」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。