【カレント表示】現在のページのみメニューのデザインを変更する方法

【カレント表示】現在のページのみメニューのデザインを変更する方法

ヘッダーメニューなどで、現在のページのみ色を変更したい!といった悩みにお答えします。

この記事ではjQueryJavaScript(Vanilla JS)両方を掲載しています。

目次

カレント表示のコード

HTML

HTMLはこのような構造です。

<ul class="header__nav">
   <li class="header-nav__item">
      <a href="index.html">ホーム</a>
   </li>
   <li class="header-nav__item">
      <a href="page2.html">ページ2</a>
   </li>
   <li class="header-nav__item">
      <a href="page3.html">ページ3</a>
   </li>
</ul>

jQuery / JavaScript

jQuery、JavaScriptどちらでも好きな方で構いませんが、簡単なコードなのでパフォーマンス向上やコードの理解のために、JavaScriptの記述をおすすめします。

jQuery

// カレント表示
const links = jQuery(".header-nav__item > a");

links.each(function () {
    if (this.href === location.href) {
        jQuery(this).closest(".header-nav__item").addClass("current");
    }
});

JavaScript

// カレント表示
const links = document.querySelectorAll(".header-nav__item > a");

links.forEach(function (link) {
    if (link.href === location.href) {
        link.closest(".header-nav__item").classList.add("current");
    }
});

ナビのリンク(.header-nav__item > a)を取得し、取得したURLと現在のページURLが一致していれば.header-nav__itemcurrentクラスを追加するというものです。

CSS

あとはCSSでcurrentのデザインを調整すればOKです。

CSSの例

/* 通常時のCSSを書く */ 
.header-nav__item a {
  color: #333;
}

/* カレント表示のCSSを書く */
.current.header-nav__item a {
  color: blue;
}

まとめ:カレント表示の方法

以上、jQuery / JavaScript(Vanilla JS)でカレント表示する方法の解説でした。

他にも様々な方法がありますが、これが最も簡単なのではないでしょうか。

是非実装してみてください。

おすすめWEBスクール

WEB制作やWEBデザインを学びたいなら、SNSでも話題の「デイトラ」がおすすめ!
どのコースも10万円前後と業界最安値で、副業や転職に向けて十分なスキルを身につけることができます。

\ ここから飛べます! /

役に立ったら他の方にシェア

お気軽にコメントどうぞ

コメントする

目次