ナビゲーションの現在地をアクティブにするJS小技
この記事は賞味期限切れです。(更新から1年が経過しています)
わざわざ投稿するほどのものか、というぐらいちょこざいな小技です。
JavaScriptでナビゲーションを操作して、
現在いるディレクトリのナビゲーションに「.active」クラスを付加してみます。
例えばこんなナビゲーションがあるとしますね。
こんなかんじにマークアップされているとしましょう。
<ul id="navi">
<li><a href="#" id="navi-home">HOME</a></li>
<li><a href="#" id="navi-product">PRODUCTS</a></li>
<li><a href="#" id="navi-about">ABOUT</a></li>
<li><a href="#" id="navi-blog">BLOG</a></li>
<li><a href="#" id="navi-contact">CONTACT</a></li>
</ul>
アクティブに見せる為の「.active」クラスを用意します。
#navi li a.active {
/* なんらかのスタイル */
}
仕上げにスクリプトを書きます。jQuery使ってます。
var naviConfig = [
{ rule:"/product/", selector:"#navi-product" },
{ rule:"/about/", selector:"#navi-about" },
{ rule:"/blog/", selector:"#navi-blog" },
{ rule:"/contact/", selector:"#navi-contact" }
];
(function(config){
for(var i=0;i<config.length;i++){
if( location.href.match(config[i].rule) ){
$(config[i].selector).addClass("active");
return;
}
}
})( naviConfig );
ご覧の通り、ruleの文字列に現在のURLがマッチした場合に、
selectorにあてはまる要素にactiveクラスを付加しています。
それだけです。
例えば、URLが「http://www.example.com/product/hogehoge.html」等だった場合に、
「/product/」の部分がマッチして#navi-productの要素がアクティブになります。
複雑なルール付けが必要な場合は、ruleに正規表現を使用してもいいですね。
静的にclass=”active”を書くのが良いとも言えますが、
Dreamweaverのライブラリや各CMSでモジュール化してあるナビゲーションだと、
条件分岐などが面倒な場合があります。
そんな時はこんな感じにJavaScriptを使ってさっくり処理してしまうのも一手かと。
コメント