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

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

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

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

WordPressのおすすめサーバー

特徴
  • 料金が安い
  • WordPressが超高速
  • ドメイン永久無料
  • 安心の実績とサポート体制

新規も乗り換えも

目次

カレント表示のコード

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(Vanilla JS)

jQuery

まずはjQueryから。

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

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

現在のページのURLと、ナビのリンク(.header-nav__item > a)をすべて取得します。

もし、取得したURLと現在のページが一致していれば、.header-nav__itemcurrentのクラス名を追加するというものです。

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

.header-nav__item a {
    // 通常時のCSSを書く
}

.current .header-nav__item a {
    // 現在のページの時のCSSを書く
}

JavaScript(Vanilla JS)

JavaScript(Vanilla JS)の方も掲載しておきます。

// カレント表示
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");
    }
});

コードの長さや複雑さも変わらないので、基本的にはパフォーマンス向上やコードの理解のために、jQueryではなく純粋なJavaScriptの記述をおすすめします。

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

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

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

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

カスタマイズを自分でしてみませんか?

「あの機能追加したいな」「もう少しここを調整したいな」と思ったらWeb制作のスクール「デイトラ」がおすすめです…!

カリキュラムは3ヶ月分ですが、受講生は卒業後もずっと見放題!常に最新のコンテンツに更新されるため、情報が古くなるなんてこともありません。

価格はどのコースも10万円前後と他のスクールに比べても格安です。
なのに副業・転職に十分なスキルが身につきます。

管理人

私はWeb制作とWebデザインを受講し、現在フリーランスWebデザイナーとなりました。

他にも様々なコースが充実しているので、身につけたいスキルがあったら是非覗いてみてください。

コースの一部をご紹介

よかったらシェアしてね!

コメント

コメントする

目次