【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 文 』については過去記事でもご紹介しましたので、そちらもご参照ください。

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

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

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

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

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

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

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

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

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

この条件分岐の意味は、

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

です。

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

上記の条件分岐の真偽値は 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 属性を持つリンクにのみ下線のスタイルが当たる、という仕組みです。

JavaScript 初心者にはコチラが分かりやすかったです▼