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

<ul class="header-nav">
   <li class="header-nav__item"><a href="/">HOME</a></li>
   <li class="header-nav__item"><a href="/about/">ABOUT</a></li>
   <li class="header-nav__item"><a href="/work/">WORK</a></li>
</ul>

// カレント表示
const links = jQuery(".header-nav__item > a");

links.each(function () {
    if (this.href === location.href) {
        jQuery(this).closest(".header-nav__item").addClass("current");
    }
});

// カレント表示
const links = document.querySelectorAll(".header-nav__item > a");

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

// カレント表示
const links = document.querySelectorAll(".header-nav__item > a");

links.forEach(link => {
  if (
    // 外部リンクを除外して比較
    link.origin === location.origin &&
    // 末尾のスラッシュを削除して比較
    link.pathname.replace(/\/$/, "") === location.pathname.replace(/\/$/, "")
  ) {
    link.closest(".header-nav__item").classList.add("current");
  }
});

/* 通常時 */ 
.header-nav__item a {
  color: #333;
}

/* カレント表示 */
.header-nav__item.current a {
  color: blue;
}