phpcms父栏目高亮

<ul class="nav">
    <li class="nav-item"><a href="/category1">Category 1</a>
        <ul class="sub-nav">
            <li class="sub-nav-item"><a href="/category1/sub1">Sub 1</a></li>
            <li class="sub-nav-item"><a href="/category1/sub2">Sub 2</a></li>
        </ul>
    </li>
    <li class="nav-item"><a href="/category2">Category 2</a></li>
</ul>

.nav-item.active > a {
    color: red; /* 高亮颜色 */
}

document.addEventListener('DOMContentLoaded', function() {
    var currentPath = window.location.pathname;
    var navItems = document.querySelectorAll('.nav-item');

    navItems.forEach(function(navItem) {
        var link = navItem.querySelector('a');
        if (link && link.getAttribute('href') === currentPath) {
            navItem.classList.add('active');
            // 找到父栏目并高亮
            var parentItem = navItem.parentElement;
            while (parentItem && !parentItem.classList.contains('nav-item')) {
                parentItem = parentItem.parentElement;
            }
            if (parentItem) {
                parentItem.classList.add('active');
            }
        }
    });
});