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」が付与される。
参考にさせてもらったサイト
【カレント表示】現在のページのみメニューのデザインを変更する方法
javascriptとjQueryの両方のコードが書いてあったりとわかりやすかったです。
ありがとうございます。