バニラJavaScriptで現在のページのメニュー項目を強調表示する方法

ウェブサイトのナビゲーションバー/メニューで現在アクティブなページを強調表示する方法を学びます。

一般的なWebサイトの機能は、ユーザーがページ間を移動するときに現在のページメニュー項目を強調表示することです。

バニラJavaScriptを使用してこれを行う方法は次のとおりです。

ステップ1：シンプルなメニュー

<nav class="navbar">
	<a href="/">Home</a>
	<a href="/about">About</a>
	<a href="/contact">Contact</a>
</nav>

ステップ2：CSSスタイリング

最小限のCSSスタイル。ここで重要なのは.currentです。 ステップ3で、現在アクティブなページアイテムに追加するクラスです。

.navbar {
	background-color: #111;
	padding: 1rem;
}
.navbar a {
	text-decoration: none;
	color: white;
	padding: 1rem;
}

.current {
	color: #df3e23;
}

ステップ3：JavaScript

このコードは、現在のページのURLを検索してから、currentを追加します。 対応するメニュー項目へのクラス：

const current = 0;
for (var i = 0; i < document.links.length; i++) {
    if (document.links[i].href === document.URL) {
        current = i;
    }
}
document.links[current].className = 'current';