Mach3.laBlog

ナビゲーションの現在地をアクティブにする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」クラスを用意します。

.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を使ってさっくり処理してしまうのも一手かと。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*