HTML・CSS

【JavaScript】カレントページのとき「current」のclassを付与するメモ

HTML

<ul class="nav-list">
    <li class="nav-item"><a href="/news">お知らせ</a></li>
    <li class="nav-item"><a href="/event">イベント</a></li>
</ul>

<!-- 「お知らせ」がカレントページのとき -->
<ul class="nav-list">
    <li class="nav-item current"><a href="/news">お知らせ</a></li>
    <li class="nav-item"><a href="/event">イベント</a></li>
</ul>

カレントページのときに「current」をつけて、cssでデザイン変更したい。

CSS

/* current表示 */
nav-item.current a {
    color: #fff;
}

カレントページのときの表示デザインを記述。

JavaScript

// current
const links = document.querySelectorAll(".nav-item > a");

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

これでカレントページのとき「current」が付与される。

が、これだとスラッシュがついてたりすると効かないことがある。
ので、以下のコードに修正。

const links = document.querySelectorAll(".nav-item > a");

links.forEach(function (link) {
    // 現在のページのパス名を取得
    let currentPath = location.pathname;
    let linkPath = new URL(link.href).pathname;

    // 末尾のスラッシュを無視して比較
    if (currentPath.replace(/\/$/, '') === linkPath.replace(/\/$/, '')) {
        link.closest(".nav-item").classList.add("current");
    }
});

参考にさせてもらったサイト

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

javascriptとjQueryの両方のコードが書いてあったりとわかりやすかったです。
ありがとうございます。

ABOUT US
yukipan
Web制作会社で働いてます。パンダとかリラックマとか、まあるいものが好き。好奇心旺盛で、何にでも興味をもってしまう。とりあえずやってみてから取捨選択するのがモットー。今はグリーンカレーとチャイと株式投資がブーム。