php 页面通过 href 跳转会刷新整个页面，导致 javascript 添加的 active 类丢失；需结合服务端逻辑（如解析当前文件名）动态设置 active 类，而非仅依赖客户端点击事件。
php 页面通过 href 跳转会刷新整个页面，导致 javascript 添加的 active 类丢失；需结合服务端逻辑（如解析当前文件名）动态设置 active 类，而非仅依赖客户端点击事件。
在 PHP 项目中，导航栏的 active 状态无法仅靠纯前端 JavaScript 维持——因为每次点击 都会触发完整页面跳转，浏览器重新加载 DOM，之前 JS 动态添加的 active 类自然被重置。你观察到 href="#" 能生效，正是因为此时未发生跳转，JS 事件能持续作用于当前页面 DOM。
✅ 正确解法：服务端动态判断当前页面，直接渲染对应 标签的 active 类
以 sidebar.php 为例，修改为支持自动识别当前页面：
<!-- sidebar.php -->
<nav class="side-bar">
<ul>
<li>
<a href="index.php" class="category <?= basename($_SERVER['PHP_SELF']) === 'index.php' ? 'active' : '' ?>">
<i class="fi fi-bs-home"></i>
<span>Home</span>
</a>
</li>
<li>
<a href="room.php" class="category <?= 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 <?= basename($_SERVER['PHP_SELF']) === 'contact.php' ? 'active' : '' ?>">
<i class="fi fi-br-comment-alt"></i>
<span>Contact</span>
</a>
</li>
</ul>
</nav>? 关键说明：
立即学习“PHP免费学习笔记（深入）”；
- $_SERVER['PHP_SELF'] 返回当前执行脚本的文件名（如 /project/contact.php），basename() 提取末尾文件名（contact.php）；
- 每个 标签通过内联 PHP 表达式动态决定是否添加 active 类，确保首次加载即精准高亮；
- 无需依赖 JS 点击逻辑，彻底规避跳转丢失状态的问题。
? 补充建议（增强健壮性）：
- 若存在子目录或路由参数（如 contact.php?id=1），可改用 $_SERVER['SCRIPT_NAME'] 或正则匹配路径；
- CSS 样式仍需定义 .category.active 的视觉效果（如颜色、背景等），例如：
.category.active {
color: #7F7FEE;
font-weight: bold;
}
.category {
color: #333;
text-decoration: none;
}⚠️ 注意事项：
- 删除原 script.js 中对 .category 的 click 监听逻辑（除非你同时需要「单页应用式」局部切换，但需配合 History API，与当前多页 PHP 架构不兼容）；
- 确保所有页面均正确引入 sidebar.php（如 ），且 PHP 环境已启用；
- 开发时检查浏览器开发者工具 → Elements 面板，确认生成的 HTML 中目标 是否真实含有 active 类——这是验证服务端逻辑是否生效的最直接方式。
通过服务端驱动 active 状态，既符合 PHP 多页面架构本质，又简洁可靠，是新手入门时应掌握的标准实践。
