JSP, JS ) 네비게이션(Navigation) 탭 active 만들기

navigation.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%-- navigation.jsp --%>
<div class="card-body">
    <div class="list-group list-group-transparent">
        <a href="/A/AA.do" class="list-group-item list-group-item-action d-flex align-items-center">A탭</a>	
        <a href="/B/BB.do" class="list-group-item list-group-item-action d-flex align-items-center">B탭</a> 
        <a href="/C/CC.do" class="list-group-item list-group-item-action d-flex align-items-center">C탭</a>
        <a href="/D/DD.do" class="list-group-item list-group-item-action d-flex align-items-center">D탭</a>
    </div>
</div>
<script>
    /** 탭 클릭 시마다 active 주기*/
    document.addEventListener('DOMContentLoaded', function() {
        var path = window.location.pathname;   
        var page = path.split("/").pop();       

        var navItems = document.querySelectorAll('.list-group-item-action');
        for (var i = 0; i < navItems.length; i++) {
            var href = navItems[i].getAttribute('href');
            if (href.includes(page)) {
                navItems[i].classList.add('active');
            }
        }
    });
</script>