【jQuery】今いるディレクトリに該当するナビゲーションだけスタイルを変えたい

背景

前回、一部ディレクトリだけWordPressでできてるサイトでヘッダーフッターを一括管理する方法を書きました。

これってヘッダーはどのページからも同じものを呼び出します。
で、こういうデザインのヘッダーメニューってよくあると思うんです。

「会社紹介」のページにいるときは、メニューの「会社紹介」のところだけスタイルを変えたい！！！
どうする？ページごとに違うマークアップのメニューを呼び出す？しんどいですよね。
じゃあヘッダーのマークアップはそのままで、jQueryの力を借りて勝手にスタイル変えてもらいましょう！！！

HTMLのメニュー部分のマークアップ

ヘッダーメニュー部分はこんな感じでできているとします。
実際にはスタイル当てるためにclassとかバシバシ当てますが、わかりやすくするために最低限にしておきます。

index.html

<header>
 <h1>サイトタイトル</h1>
 <nav>
  <ul>
   <li>
    <a class="header_link" href="/">ホーム</a>
   </li>
　　<li>
    <a class="header_link" href="/company/">会社紹介</a>
   </li>
　　<li>
    <a class="header_link" href="/works/">事業紹介</a>
   </li>
   <li>
    <a class="header_link" href="/recruit/">採用情報</a>
   </li>
　　<li>
    <a class="header_link"href="/news/">お知らせ</a>
   </li>
　　<li>
    <a class="header_link" href="/contact/">お問い合わせ</a>
   </li>
  </ul>
 </nav>
</header>

で、例えば https://hogehoge.com/company/ みたいな、会社紹介に当たるディレクトリのページを見ている時にはこんな感じになってほしい。

company/index.html

<header>
 <h1>サイトタイトル</h1>
 <nav>
  <ul>
   <li>
    <a class="header_link" href="/">ホーム</a>
   </li>
　　<li>
    <a class="header_link active" href="/company/">会社紹介</a>
   </li>
　　<li>
    <a class="header_link" href="/works/">事業紹介</a>
   </li>
   <li>
    <a class="header_link" href="/recruit/">採用情報</a>
   </li>
　　<li>
    <a class="header_link" href="/news/">お知らせ</a>
   </li>
　　<li>
    <a class="header_link" href="/contact/">お問い合わせ</a>
   </li>
  </ul>
 </nav>
</header>

jQueryにいい感じにやってもらいましょう。こんな感じです。

script.js

$(function(){
 const currentUrl = location.pathname;  //現在のURLのドメイン以下のパスを取得
 const urlArr =  currentUrl.split('/'); //取得したURLを / で区切って配列化する
 const currentDir = urlArr[1];  //配列の1番目、親ディレクトリを取得

 $('.header_link').each(function (i, v) { 

      let targetHref = $(v).attr('href'); // header_linkのhref属性を取得
      let hrefArr = targetHref.split('/'); //href属性の値を分割して配列化する
      let hrefDir = hrefArr[1]; //href属性の第1階層を取得

    // 現在の第1階層と、href属性の第1階層が一致していたらclassを付与する
    if (currentDir === hrefDir) {
      $(v).addClass('active');
    }

  });
});

これで、companyディレクトリを見ている場合は 上記company/index.htmlのコードみたいになるし、他の階層でも同じように動きます。
.activeのclassが当たっている.header_linkに、スタイルを当てておきましょう。

例

style.css

.header_link.active {
 border-bottom: 2px solid #000;
}

終わり

検索してみたら、ほとんど同じことを紹介してるサイトありました。
要件やサイト構成に合わせてカスタマイズしてみてください。