如何在 PHP 页面跳转后保持导航栏的 active 状态-php教程-PHP中文网

如何在 PHP 页面跳转后保持导航栏的 active 状态

javascript 无法跨页面保留 dom 状态，因此需结合 php 动态判断当前页面并为对应菜单项添加 active 类，而非依赖纯前端点击逻辑。

javascript 无法跨页面保留 dom 状态，因此需结合 php 动态判断当前页面并为对应菜单项添加 active 类，而非依赖纯前端点击逻辑。

在 PHP 多页面应用中，常见的误区是试图用 JavaScript 的 click 事件为添加 active 类——这只能在当前页面内生效。一旦用户点击跳转到新页面（如从 index.php 跳转到 contact.php），浏览器会重新加载整个 HTML，此前 JS 设置的 active 类将丢失，导致高亮失效。

✅ 正确解法：服务端动态渲染 active 状态
利用 PHP 获取当前脚本文件名（如 basename($_SERVER['PHP_SELF'])），在生成侧边栏时，自动为匹配的链接添加 active 类：

<!-- sidebar.php -->
<nav class="side-bar"><ul>
<li>
            <a href="index.php" class="category <?php echo basename($_SERVER['PHP_SELF']) === 'index.php' ? 'active' : ''; ?>">
                <i class="fi fi-bs-home"></i>
                <span>Home</span>
            </a>
        </li>
        <li>
            <a href="#" class="category <?php echo basename($_SERVER['PHP_SELF']) === 'room.php' ? 'active' : ''; ?>">
                <i class="fi fi-bs-apps"></i>
                <span>Room</span>
            </a>
        </li>
        <li>
            <a href="contact.php" class="category <?php echo basename($_SERVER['PHP_SELF']) === 'contact.php' ? 'active' : ''; ?>">
                <i class="fi fi-br-comment-alt"></i>
                <span>Contact</span>
            </a>
        </li>
    </ul></nav>

? 注意事项：

PHP

编写健壮的PHP代码，规避类型转换陷阱、数组怪癖及常见安全漏洞。

下载

确保所有页面（如 index.php, contact.php, room.php）均正确引入 sidebar.php；
若使用子目录（如 /admin/index.php），建议改用 $_SERVER['REQUEST_URI'] 或解析路径，避免 basename() 误判；
CSS 中仍需定义 .active 样式（如 color: #7F7FEE; font-weight: bold;），但无需再写 :visited 特殊规则——active 是明确的业务状态，不应与浏览器访问历史混淆；
原 JS 脚本（监听 click 并切换 active）可完全移除，避免干扰服务端逻辑，提升可维护性。

? 进阶提示：可封装为函数复用

<?php function isActive($page) {
    return basename($_SERVER['PHP_SELF']) === $page ? 'active' : '';
}
?><!-- 使用 --><a href="contact.php" class="category <?= isActive('contact.php') ?>">Contact</a>

这样既保证了页面加载即高亮准确，又符合 PHP 服务端渲染的最佳实践。