PHP页面跳转后JS设置的导航active高亮类失效如何解决

现有JS切换active类的逻辑仅在无页面刷新的场景下生效：

• 当a标签href设为#时，点击不会触发页面跳转，JS修改的DOM类名会保留在当前页面，因此高亮正常
• 当a标签href指向实际php页面时，点击后浏览器会直接跳转、重载全新页面，点击瞬间给元素添加的active类会随着旧页面的销毁完全丢失；新页面加载时读取的是sidebar.php里写死的静态HTML，默认只有Home项带active类，跳转其他页面时自然无法显示对应高亮。

多页站点的导航高亮不要依赖前端点击事件临时修改类名，直接在PHP渲染侧边栏阶段，根据当前访问路径给对应导航项动态添加active类，稳定性更高，也不会出现跳转时的样式闪烁。

修改sidebar.php代码 #

替换原有静态导航代码为动态判断的版本：

<?php
// 提取当前访问页面的文件名
$currentPath = basename($_SERVER['PHP_SELF']);
?>
<nav class="side-bar">
    <ul>
        <li>
            <a href="index.php" class="category <?= $currentPath == 'index.php' ? 'active' : '' ?>">
                <i class="fi fi-bs-home"></i>
                <span>Home</span>
            </a>
        </li>
        <li>
            <a href="#" class="category <?= $currentPath == 'room.php' ? 'active' : '' ?>">
                <i class="fi fi-bs-apps"></i>
                <span>Room</span>
            </a>
        </li>
        <li>
            <a href="contact.php" class="category <?= $currentPath == 'contact.php' ? 'active' : '' ?>">
                <i class="fi fi-br-comment-alt"></i>
                <span>Contact</span>
            </a>
        </li>
    </ul>
</nav>

原有JS处理 #

原来script.js里写的点击切换active的逻辑对整页跳转场景没有实际作用，可以直接删除；如果后续要做无刷新加载的交互，保留这段代码也不会和PHP渲染的逻辑冲突。

如果你后续调整了站点路由规则，不再是直接访问php文件的形式，只要修改$currentPath的匹配规则，和实际路由对应即可，核心逻辑是页面初始加载时就匹配到当前页面对应的导航项，加上active类。

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