바닐라 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단계:자바스크립트

이 코드는 현재 페이지 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';