【JavaScript】ナビメニューの現在のページ部分の色を変える【カレント表示】

  • 投稿日
  • 更新日
  • 著者 NKMR
  • カテゴリー JavaScript

ナビゲーションメニューの現在表示しているページのリンクだけスタイルを当てるJavaScriptの書き方を解説します。

【JavaScript】ナビメニューの現在のページ部分の色を変える【カレント表示】

さっそくサンプルコードです↓

let navLink = document.getElementsByClassName('hoge');
    for (let i = 0; i < navLink.length; i++) {
      if(navLink[i].href === location.href) {
          navLink[i].classList.add('style-change');
        }
    }

では解説します。

まず前提として、ナビゲーションメニューのリンクに共通のクラスを付与します。

サンプルコードでは『hoge』がナビゲーションメニュー全てのリンクに付与されているクラスです。

このクラスを getElementsByClassName で取得し、変数 navLink に代入します。（変数名はお好みでどうぞ）

getElementsByClassName についてはコチラを参照してくださいね。

で、変数 navLink に代入した配列風オブジェクト（HTMLCollection）を navLink に代入した hoge の数だけ『 for 文 』でループさせて繰り返し取得します。

『 for 文 』については過去記事でもご紹介しましたので、そちらもご参照ください。

【JavaScript】for 文での繰り返し（ループ）処理する方法【基本】
for 文で処理を繰り返す方法を復習がてらメモします。 【JavaScript】for 文での繰り返し（ループ…
clicklyquickly.com

サンプルコード内の該当箇所はコチラです↓

for (let i = 0; i < navLink.length; i++)

このループ処理を順に説明すると、

  • 変数 i に 数値の 0 を代入する
  • i の数（0）より navLink.length で取得した配列風オブジェクトの数が多い間は
  • i の数を一つずつカウント（加算）させる

という処理です。（ length についてはコチラをご参照ください）

例えば、クラスが付与されたナビゲーションメニューの数が５つだとしたら５回ループ処理される、という意味です。

次に、その for 文の中で if 文を使って条件分岐させます。

サンプルコード内の該当箇所はコチラ↓

if(navLink[i].href === location.href)

この条件分岐の意味は、

『もし、取得した配列風オブジェクトの中のhref 属性 と 現在表示しているページのURLが等しい場合』

です。

location オブジェクトや .href については過去記事でご紹介してますので、そちらをご参照ください。

【JavaScript】location オブジェクトでURLやパスを取得する
location オブジェクトとは、URLからパラメータを取得したり、指定したアドレスに移動したりする時に使う…
clicklyquickly.com
【JavaScript】URLを取得してページごとに条件分岐させる
案件でページ毎にJavaScriptを適用したい場面がけっこうあるので、そんなときに使える『ページURLを取得…
clicklyquickly.com

上記の条件分岐の真偽値は true になるので、その場合の処理を次の

if(navLink[i].href === location.href) {
   // ↓ が処理内容
   navLink[i].classList.add('style-change');
}

該当部分に記入します。

処理内容の『 navLink[i] 』の中は現在表示されているURLと一致した href 属性を持つリンクです。

このサンプルコードの内容は、

  • 現在表示されているページのURLと一致する href 属性を持つリンクに
  • 『 style-change 』というクラスを付与する

という意味で、style-change（クラス名はお好みで）というクラスに、例えば下線のCSSスタイルを与えてあげると、今表示されているページのURLと同じhref 属性を持つリンクにのみ下線のスタイルが当たる、という仕組みです。

TIPS