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

<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表示 */
nav-item.current a {
    color: #fff;
}

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

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