Technology

jQueryでカレントページの要素にclass=”current”を付加する方法

By 8月 18th, 2012 No Comments

さくっと実装できたのでメモ。

<ul class="menu">
<li id="menu01"><a href="/page01/">page01</a></li>
<li id="menu02"><a href="/page02/">page02</a></li>
<li id="menu03"><a href="/page03/">page03</a></li>
</ul>

上記のようなHTMLがあって、

<ul class="menu">
<li id="menu01" class="current"><a href="/page01/">page01</a></li>
<li id="menu02"><a href="/page02/">page02</a></li>
<li id="menu03"><a href="/page03/">page03</a></li>
</ul>

上記のようにしたい場合、headタグ内でjQueryを読み込んだ上で、JavaScriptで下記のように書きます。

$(function(){
var url = window.location.pathname;
$('.menu li a[href="'+url+'"]').parent().addClass('current');
});

window.location.pathnameでサイトルート相対のURLが取得でき、そのURLにマッチしたアンカーの親要素(この場合はli)にcurrentというclassを追加します。
サブメニューがある場合、以下のようにします。
例:カレントが/page01/sub01/のときに、page01にclass=”current”をつけたい場合

<ul class="menu">
<li id="menu01">
<a href="/page01/">page01</a>
<ul>
<li><a href="/page01/sub01/">sub01</a></li>
</ul>
</li>
</ul>

上記のようなHTMLがあって、

<ul class="menu">
<li id="menu01" class="current">
<a href="/page01/">page01</a>
<ul>
<li><a href="/page01/sub01/">sub01</a></li>
</ul>
</li>
</ul>

上記のようにしたい場合、headタグ内でjQueryを読み込んだ上で、JavaScriptで下記のように書きます。

$(function(){
var url = window.location.pathname;
var url = "/"+url.split("/")[1]+"/";
$('.menu li a[href="'+url+'"]').parent().addClass('current');
});

window.location.pathnameでは「/page01/sub01/」が返ってきますが、「/page01/」を取得したいので、スラッシュでsplitし、2番目の要素の前後にスラッシュを付加します。

Kunitaka Kawashimo

Kunitaka Kawashimo

アートディレクター・デザイナー・フォトグラファー。株式会社クリーム代表取締役。グラフィックデザイン/Webデザイン/撮影の仕事のご相談・ご質問は、お気軽に以下までご連絡ください。info@creamu.co.jp