HighLab

グローバルメニューの現在開いてるページの文字列をactiveにする

  • 公開日:
  • 更新日:
  • 文字数:959文字

グーバルメニューで現在開いてるページの文字列だけ、色を変えたり装飾したりといった案件があると思います。
その際にjs・jqeryを用いて解決できます。
難易度は簡単で貼り付けるだけ!

ulのidを#grobal-menuにしてください。

下記コードを貼り付けると
liにactiveが付与されます。
aタグにactiveのclassをつけたい場合は、
parent()関数を外せば、aタグ にactiveを付与することができます。

$(document).ready(function() {
    var activeUrl = location.pathname.split("/")[1];
      navList = $("#grobal-menu").find("a");
    if (!activeUrl) {
      return false;
    }
    navList.each(function(){
        if( $(this).attr("href").split("/")[3] == activeUrl ) {
         $(this).parent().addClass("active");
       }else {
        $(this).parent().removeClass('active');
      };
  });
});

参考文献

https://www.markernet.co.jp/blog/2014/08/22/post-2493/
https://www.tam-tam.co.jp/tipsnote/javascript/post2775.html
https://hirocreate.com/css/%E7%8F%BE%E5%9C%A8%E9%96%8B%E3%81%84%E3%81%A6%E3%81%84%E3%82%8B%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92jquery%E3%81%A7active%EF%BC%88%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%EF%BC%89%E3%81%ABcss/