使用JavaScript实现Navbar active高亮时子页面无法激活的问题求助

问题原因 #

原代码采用完全相等匹配逻辑判断导航项是否激活，仅当当前页面URL与导航a标签的href属性完全一致时才会添加高亮类，因此父路径对应的子页面无法命中匹配规则。

修复后的JS逻辑 #

// 仅选中导航栏内的导航链接，避免影响页面其他a标签
const navLinks = document.querySelectorAll('#nav .nav-link');
// 获取当前页面的路径部分（去除域名、参数等冗余内容，匹配更精准）
const currentPath = window.location.pathname;

navLinks.forEach(link => {
    // 先移除所有导航项的active类
    link.classList.remove('active');
    const linkPath = new URL(link.href).pathname;
    
    // 根路径特殊处理，避免根路径匹配所有页面
    if (linkPath === '/') {
        if (currentPath === '/') {
            link.classList.add('active');
        }
        return;
    }
    
    // 非根路径判断当前路径是否是导航路径的子路径
    if (currentPath.startsWith(linkPath)) {
        link.classList.add('active');
    }
});

补充说明 #

• 如果存在路径前缀重叠的情况（比如有/course和/course-list两个导航项），可以给导航a标签加自定义属性比如data-parent-path手动指定匹配前缀，避免误匹配
• 路径匹配逻辑可根据站点路由规则调整，比如需要忽略大小写的话可统一转成小写后再做匹配

内容的提问来源于stack exchange，提问作者bothsworth