【JavaScript】ヘッダーにカレント表示を実装する

というわけで今回はヘッダーナビのカレント表示についてお話します。
カレント表示とは「ヘッダーとかのナビゲーションで現在表示中のページを色を変えたりする」ことです。
今回はJavaScriptで実装してみましょう！！

ヘッダーにカレント表示を実装する

ではさっそくコードを見ていきましょう！

【HTML】

<li class="p-header__list"><a href="/" class="p-header__list-link">ホーム</a></li>
<li class="p-header__list"><a href="/company" class="p-header__list-link">法人概要</a></li>
<li class="p-header__list"><a href="/service" class="p-header__list-link">サービス</a></li>
<li class="p-header__list"><a href="/contact" class="p-header__list-link">お問い合わせ</a></li>

【CSS】

.p-header__list-link　｛
　color: blue;　
｝

.p-header__list-link:hover {
  color: red;
}

.p-header__list-link.is-current {
  color: red;
}

【JavaScript】

const headerNavLink = document.querySelectorAll('.p-header__list-link');

  headerNavLink.forEach((targetLink) => {
    if (targetLink.href === location.href) {
      targetLink.classList.add('is-current');
    }

ヘッダーナビの色は、通常時は青、ホバーすると赤色に変化します。
また、カレント表示も赤色にするようなコードとなっております。

location.href

ここからはJavaScriptの説明をしていきます！

【JavaScript】

const headerNavLink = document.querySelectorAll('.p-header__list-link');

  headerNavLink.forEach((targetLink) => {
    if (targetLink.href === location.href) {
      targetLink.classList.add('is-current');
    }

「headerNavLink」という変数に、「.p-header__list-link」というクラスの要素を全て代入しています。
そこから、forEachを使って一つずつ「targetLink」に入れております。

ここでif文で条件分岐をしております。

targetLink.href === location.href

「location.href」は関数ではなく、「location」のプロパティです。
「location.href」は現在ページのURLを知ることができます。

つまり現在のページURLと「targetLink.href」の値が合っているかでtrueを返し、
trueなら「.is-current」を付与するという構造になっています。

hrefプロパティ・・・オブジェクトのhrefに記載されているリンク先の全体のURLを取得する

「＝＝＝」は厳密等価演算子ですね。「値」と「型」が等しいかを確認する演算子です。

これで、ヘッダーナビに設定されているリンクと現在ページのURLをチェックして
同じなら「is-current」クラスを付与して、現在ページのヘッダーナビにCSSを当てることができるようになります。

まとめ

というわけで今回はヘッダーナビのカレント表示についてお話しました！
実案件でも割と使いますので是非覚えておきましょう！！