【jQuery】JSで共通ナビの現在地をアクティブにする

chinen

11年 ago

グローバルナビを共通ファイル化するとき、PHPやCMSで管理して
現在地判定もそこで設定することが多いのですが、
今回は現在地の判定をJavaScriptで実装してほしいという要望があり、調べてみました。
　

　「jquery　現在地」で検索したら、すぐ使えそうなものがいっぱい出てきました。。やり方はいくつかあり、・bodyタグに、該当するディレクトリをIDで指定しておき、マッチする要素にクラスを追加・liやa要素にIDをつけておき、現在のURLとIDがマッチしたらクラスを追加・現在のURLとナビのリンクURLがマッチしたらクラスを追加 etc. 　ページごとにIDやクラス指定を追加するのは手間なので、他サイトでもすぐ使いまわせそうな「現在のURLとナビのリンクURLがマッチしたらクラスを追加する」パターンを紹介します。こちらは参考サイトからコピペしたものです。

$(document).ready(function() {
    if(location.pathname != "/") {
        $('#gnav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
    } else $('#gnav a:eq(0)').addClass('active');
});

ナビゲーションの「a要素hrefの値」と「現在のページURL」が一致していれば a要素にclass="active"を追加します。トップページの場合は、一番初めのaタグにactiveが追加されます。ナビゲーションにトップページへのリンクが含まれていない場合は、 4行目elseで指定している部分を削除すれば良いかと思います。　　上記のパターンではサイトルート直下のフォルダを判定しています。 https://www.tam-tam.co.jp/tipsnote/　でいうところのtipsnote部分ですね。　　今回たまたま特殊なディレクトリ構成で、ルート直下から「2番目のフォルダ」がナビに指定されているパターンの対応が必要だったので、上記JSを参考に作ってみました。

例）test01/部分を判定したい
http://www.tam-tam.co.jp/testcategory/test01/

$(document).ready(function() {
    var activeUrl = location.pathname.split("/")[2];
      navList = $("#gnav").find("a");
    navList.each(function(){
        if( $(this).attr("href").split("/")[2] == activeUrl ) {
         $(this).addClass("active");
       };
  });
});

　現在のページのURLで2番目の「/」で区切られる部分と、 #gnavのa要素のhrefで2番目の「/」で区切られる部分の値が同じときに、クラスactiveを追加するという仕様です。　普通のサイトだと、ローカルナビで使えそうですね。 .split("/")[2] の数字を変更すれば、該当する階層のURLに対応します。ルート直下のフォルダで対応なら「1」にします。ルート直下で良ければ、最初に紹介した記述の方が短くまとまっていて良いのですが、他の階層で使いたい場合は、好きな階層に合わせて調整ができるのでこちらも参考になればと思います。　　　【参考サイト】・jQueryでカレントページの要素にclass="current"を付加する方法 | CREAMU ・[JS]ナビゲーションの現在位置の表示を自動で変更するスクリプト | コリス　　