グローバルメニューの現在開いてるページの文字列を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/