カレントメニューを実装する

2025-08-16

jsでカレントメニューを実装するコード。

URLとメニューのリンク先を比べて、一致する場合aタグにcurrentを付与する

HTML

<div class="menu">
  <ul>
    <li><a href="./">index</a></li>
    <li><a href="./page1.html">page1</a></li>
    <li><a href="./page2.html">page2</a></li>
    <li><a href="./page3.html">page3</a></li>
  </ul>
</div>

<div class="contents_area">
  <p>index</p>
</div>

JavaScript

const a = document.querySelectorAll('.menu li a');

//URLを配列に格納して最後の1つ（ファイル名）だけ抽出
const page = window.location.pathname.split('/').slice(-1);

//index.htmlがなければ追加する
if (page == '') {
  page.pop();
  page.push('index.html');
}

a.forEach(function(elm, i) {
  let href = elm.getAttribute('href').split('/').at(-1);

  //index.htmlがなければ追加する
  if (href == '') href = 'index.html';

  //class付与
  href === page.toString() ? elm.classList.add('current') : elm.classList.remove('current');
})

グロナビメニューなどでリンク先のindex.htmlが重複する場合、ファイル名だけでなくその階層のディレクトリも取得して比較しないと、すべてのindex.htmlにカレントがついてしまうので注意。

//グロナビで使用する場合
const page = window.location.pathname.split('/').slice(-2);

//index.htmlがなければ追加する
if (page.at(-1) == '') {
  page.pop();
  page.push('index.html');
}

a.forEach(function(elm, i) {
  let href = elm.getAttribute('href').split('/').at(-2);

  //（略）
})