如何用window.location实现导航激活 跳过下拉项给链接内span加样式

核心修复点 #

• 过滤下拉相关元素：排除下拉触发按钮（带dropdown-toggle类的导航链接）、下拉菜单内的子项，避免误加激活样式
• 修正样式挂载目标：匹配到正确的当前页链接后，将激活类添加到链接内部的<span>元素，而非链接本身
• 修复路径匹配逻辑：原includes判断在首页路径为/时会误匹配所有链接，改为路径精确对比避免误判

修改后完整代码 #

JavaScript 逻辑 #

const activePage = window.location.pathname;
// 选择器直接选普通导航项的直接子链接，排除下拉项
const navLinks = document.querySelectorAll('ul.navbar-nav > li.nav-item:not(.dropdown) > a.nav-link');
navLinks.forEach(link => {
    // 提取链接的纯路径部分，处理末尾斜杠兼容问题
    const linkPath = new URL(link.href).pathname;
    const formattedLinkPath = linkPath.endsWith('/') && linkPath.length > 1 ? linkPath.slice(0, -1) : linkPath;
    const formattedActivePage = activePage.endsWith('/') && activePage.length > 1 ? activePage.slice(0, -1) : activePage;
    
    if (formattedLinkPath === formattedActivePage) {
        // 给链接内部span加激活类，不修改a标签本身
        const linkSpan = link.querySelector('span');
        if (linkSpan) {
            linkSpan.classList.add('active-pill');
        }
    }
})

CSS 样式（原有样式可直接复用） #

.nav-link span.active-pill{
    color: white;
    /* 可按需补充背景色、圆角、内边距等其他激活态样式 */
}

HTML 结构说明 #

现有HTML结构无需改动，即可适配筛选逻辑：

• 普通导航项的li.nav-item不带dropdown类，会被正常选中匹配
• 下拉菜单的父级li.nav-item带dropdown类，会被选择器直接排除，不参与匹配
• 下拉菜单内部的.dropdown-item不是li.nav-item的直接子元素，不在选择器范围内，不会被误加样式

可选扩展：子页面激活父级下拉菜单 #

如果需要实现「访问下拉菜单内的子页面时，自动激活对应父级下拉项」的效果，额外添加以下逻辑即可，比如访问/Products/test时自动激活Products菜单：

const dropdownTriggers = document.querySelectorAll('ul.navbar-nav > li.nav-item.dropdown > a.nav-link');
dropdownTriggers.forEach(trigger => {
    const dropdownMenu = trigger.nextElementSibling;
    if (!dropdownMenu) return;
    const subLinks = dropdownMenu.querySelectorAll('a.dropdown-item');
    let hasActiveSubPage = false;
    subLinks.forEach(subLink => {
        const subPath = new URL(subLink.href).pathname;
        const subPathBase = subPath.substring(0, subPath.lastIndexOf('/'));
        if (activePage.startsWith(subPathBase)) hasActiveSubPage = true;
    });
    if (hasActiveSubPage) {
        const triggerSpan = trigger.querySelector('span');
        if (triggerSpan) triggerSpan.classList.add('active-pill');
    }
})

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