[JS] 메뉴 이동시 선택한 메뉴 클릭 유지 되도록

메뉴 이동시 선택한 메뉴가 클릭 유지 되도록 하려면 다음과 같은 코드를 작성하면 됩니다.

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        const menuItems = document.querySelectorAll(".class_nav .class_ul li a");
        const currentPath = window.location.pathname;

        menuItems.forEach(function(link) {
            const li = link.parentElement;

            if (link.getAttribute('href') === currentPath) {
                li.classList.add("active");
            }
        });
    });
</script>

 

 

 const menuItems = document.querySelectorAll(".class_nav .class_ul li a");

임의의 class_nav를 가진 요소 내부의 class_ul를 가진  요소 내부의 모든 li 요소의 자손인 a요소들을 선택합니다.

 

 

const currentPath = window.location.pathname;

현재 URL에서 도메인 다음에 오는 경로를 가져옵니다.

 

 

menuItems.forEach(function(link) {
    const li = link.parentElement;

    if (link.getAttribute('href') === currentPath) {
        li.classList.add("active");
    }
});

 

href인 link의 부모 요소인 li를 가져오고 해당 링크의 href 속성값과 현재 url 도메인 다음에 오는 경로를 비교하여 같으면 활성화 active를 통해 메뉴 이동시 선택한 메뉴가 클릭 유지 되도록 합니다.

 

 

 

html은 다음과 같은 형식으로 작성하면 된다. class 안에 css는 본인이 원하는 css를 적용하면 됩니다.

<nav class="_nav">
    <div class="_inner">
        <ul class="_ul">
            <li>
                <a th:href="@{/a}"><span>a메뉴</span></a>
            </li>
            <li>
                <a th:href="@{/b}"><span>b메뉴</span></a>
            </li>
            <li>
                <a th:href="@{/c}"><span>c메뉴</span></a>
            </li>
            <li>
                <a th:href="@{/d}"><span>d메뉴</span></a>
            </li>
            <li>
                <a th:href="@{/e}"><span>e메뉴</span></a>
            </li>
        </ul>
    </div>
</nav>