javascript 无法跨页面保留 dom 状态，因此需结合 php 动态判断当前页面并为对应菜单项添加 active 类，而非依赖纯前端点击逻辑。
javascript 无法跨页面保留 dom 状态，因此需结合 php 动态判断当前页面并为对应菜单项添加 active 类，而非依赖纯前端点击逻辑。
在 PHP 多页面应用中，常见的误区是试图用 JavaScript 的 click 事件为 <a href="xxx.php"> 添加 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>? 注意事项：
- 确保所有页面（如 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 服务端渲染的最佳实践。
立即学习“PHP免费学习笔记（深入）”；
