Java Scriptで作るカレント表示、ヘッダーメニュー・サイドバーの現在のページの表示を変える方法

/

※本記事にはプロモーションが含まれています。

複数ページでwebサイトを作成するときに、現在いるページがわかりやすいようにメニューの表示を変えたい時があるかと思います。
今回は現在いるページのメニューに表示を変える「カレント表示」のやり方をJavaScriptだけで実装する方法を紹介します。

サンプルコード

初めにサンプルコードを記載します。
JavaScriptの説明がメインになりますのでhtmlとcssは必要最低限の機能のみを記載してます。

JavaScriptでやっていることはとてもシンプルで、グローバルナビのリンク先と現在のページのURLを比較し、同じだった場合にclassを付与してスタイルを変更しています。

const headerNavLink = document.querySelectorAll('.js-header-nav-link');

headerNavLink.forEach((targetLink) => {
  if (targetLink.href === location.href) {
    targetLink.parentElement.classList.add('is-current');
  }
});
<header>
  <h1><a href="/">logo</a></h1>
  <nav>
    <ul>
      <li><a class="js-header-nav-link" href="/">TOP</a></li>
      <li><a class="js-header-nav-link" href="/news/">NEWS</a></li>
      <li><a class="js-header-nav-link" href="/about/">ABOUT</a></li>
      <li><a class="js-header-nav-link" href="/contact/">CONTACT</a></li>
    </ul>
  </nav>
</header>
li.is-current a {
  color: brown;
}

コードの解説

対象となる要素を取得

まず初めに対象となる要素を取得します。
今回はaタグのhref属性を取得して比較したい為、対象の要素をわかりやすいように取得したい全ての要素に.js-header-nav-linkというclass名を設定しています。
またdocument.querySelectorAllで取得した要素は配列風オブジェクトのためforEachを使い繰り返し処理を行います。

// 「js-header-nav-link」というclass名を持つ全ての要素を「headerNavLink」変数に格納
const headerNavLink = document.querySelectorAll('.js-header-nav-link');

// querySelectorAllで取得した配列風オブジェクトをforEachでループ処理
headerNavLink.forEach((targetLink) => {
  // ここに処理を記載 ・・・
});

対象の要素と現在のURLを比較

targetLinkには先ほど取得した.js-header-nav-linkの要素がそれぞれ入っており、.hrefプロパティで.js-header-nav-linkclassがついている要素のリンク先とlocation.hrefで現在のURLを取得し、それぞれの値が合っているかを比較します。

const headerNavLink = document.querySelectorAll('.js-header-nav-link');

headerNavLink.forEach((targetLink) => {
  // if文でヘッダーナビのリンク先と現在のURLを比較
  if (targetLink.href === location.href) {
  // ここに処理を記載 ・・・
  }
});

.hrefプロパティ

オブジェクトのhrefに記載されているリンク先をhttpを含む全体のURLを取得。

locationオブジェクト

現在いるペーのURLの情報を取得。location.hrefとすることで、httpを含むURL全体を収めた情報を文字列で取得します。

=== 演算子

型を含めて比較し厳密に等しい場合に真を返す。

現在のURLと同じ要素にclassを付与

現在のURLと同じリンク先の要素（aタグ）の親要素（liタグ）に.is-currentを追加しています。
JavaScriptで行っている処理はclassを追加することだけで、実際の見た目に関してはcssで調整を行います。

const headerNavLink = document.querySelectorAll('.js-header-nav-link');

headerNavLink.forEach((targetLink) => {
  if (targetLink.href === location.href) {
    // ターゲットの親要素に「is-current」classを追加
    targetLink.parentElement.classList.add('is-current');
  }
});
li.is-current a {
  color: brown;
}

.parentElementプロパティ

対象の親要素のElementを返す。

まとめ

以上でJavaScriptで作るヘッダーメニューのカレント表示の完成です。
ヘッダーのグローバルナビ以外にもサイドバーなどで同じように利用することができますので様々なシチュエーションでアレンジして試してみてください。

関連記事