侧边栏首个链接始终显示激活状态的技术问题求助

第一个链接的路径大概率是根路径/，而其他页面的路径（比如/about、/contact）都包含/，所以currentPath.includes(linkPath)会一直判定为true，导致第一个链接始终被加上active类。另外代码里没有先清除之前的激活状态，也可能导致多个链接同时激活。

1. 先移除所有侧边栏链接的active类，避免状态残留
2. 针对根路径做特殊判断，只有当前路径严格等于根路径时才激活第一个链接；其他路径可以选择精确匹配或包含匹配（根据实际需求）

document.addEventListener("DOMContentLoaded", function() {
    const sidebarWrapper = document.getElementById('sidebar-wrapper');
    const closeButton = document.getElementById('close-sidebar');
    const currentPath = window.location.pathname;

    console.log("Current Path:", currentPath);

    const sidebarLinks = document.querySelectorAll('#sidebar .list-group-item');
    
    // 先清空所有链接的激活状态
    sidebarLinks.forEach(link => link.classList.remove('active'));

    sidebarLinks.forEach(function(link) {
        const linkPath = new URL(link.href).pathname;

        console.log("Link Href:", linkPath);

        // 根路径严格匹配，其他路径可按需选择includes或严格匹配
        let isActive;
        if (linkPath === '/') {
            isActive = currentPath === '/';
        } else {
            // 如果你需要路径包含该链接路径就激活，保留includes；如果要精确匹配，改成currentPath === linkPath
            isActive = currentPath.includes(linkPath);
        }

        if (isActive) {
            link.classList.add('active');
            console.log("Active Link:", link);
        }
    });

    if (closeButton) {
        closeButton.addEventListener('click', function() {
            if (sidebarWrapper) {
                sidebarWrapper.classList.toggle('collapsed');
            }
        });
    } else {
        console.error("Close button with ID 'close-sidebar' not found.");
    }
});

• 先执行sidebarLinks.forEach(link => link.classList.remove('active'))，确保每次页面加载时只有当前匹配的链接会被激活
• 根路径的特殊判断解决了第一个链接始终激活的问题，因为只有当用户确实在首页（路径为/）时，第一个链接才会被激活
• 如果每个侧边栏链接对应独立的页面路径（比如/dashboard、/profile），可以把所有判断都改成currentPath === linkPath，这样匹配更精准，不会出现子路径误激活父链接的情况

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