ASP.NET Core 레이아웃 페이지에서 메뉴 클릭 시 active CSS 클래스 적용하기

• 4/2/2023
• 2 minutes to read

ASP.NET Core 레이아웃 페이지에서 메뉴를 클릭했을 때 active CSS 클래스를 적용하는 방법은 다음과 같습니다. JavaScript 코드를 추가하여 현재 페이지의 URL과 일치하는 메뉴 항목에 active 클래스를 추가합니다.

먼저, site.css 파일 또는 _Layout.cshtml 파일에 다음과 같이 active 클래스 스타일을 정의해주세요.

.nav-item.active > .nav-link {
    background-color: #f8f9fa;
    color: #495057;
}

그런 다음, _Layout.cshtml 파일에 다음 JavaScript 코드를 추가합니다.

<script>
    // DOMContentLoaded 이벤트 리스너를 등록하여 문서 로드가 완료되면 실행
    document.addEventListener("DOMContentLoaded", function () {
        // 현재 페이지의 URL 경로를 가져옴
        var currentPageUrl = window.location.pathname;
        // 모든 .nav-item 요소를 선택
        var navItems = document.querySelectorAll(".nav-item");

        // navItems의 각 요소에 대해 반복
        navItems.forEach(function (navItem) {
            // .nav-link 요소를 찾음
            var navLink = navItem.querySelector(".nav-link");

            // navLink의 href 속성 값이 현재 페이지 URL과 일치하는지 확인
            if (navLink.getAttribute("href") === currentPageUrl) {
                // 일치한다면, 해당 navItem에 'active' 클래스를 추가
                navItem.classList.add("active");
            }
            else {
                // 일치하지 않는다면, 해당 navItem에서 'active' 클래스를 제거
                navItem.classList.remove("active");
            }
        });
    });
</script>

이렇게 하면 현재 페이지에 맞는 메뉴 항목에 active 클래스가 추가되어 해당 메뉴가 강조되어 표시됩니다.