当用户直接访问网站根目录（如 http://localhost/myapp/）时，服务器默认加载 index.php，但此时 URL 中不包含 index.php，导致 JavaScript 无法匹配链接地址，首页导航项无法高亮。本文提供服务端 PHP 判断 + 前端增强的可靠解决方案。
当用户直接访问网站根目录（如 `http://localhost/myapp/`）时，服务器默认加载 `index.php`，但此时 url 中不包含 `index.php`，导致 javascript 无法匹配链接地址，首页导航项无法高亮。本文提供服务端 php 判断 + 前端增强的可靠解决方案。
要解决“访问 /myapp/ 时 index.php 导航项无 active 类”的问题，核心在于：不能仅依赖 location.href 与 的绝对字符串匹配——因为 http://localhost/myapp/ 和 http://localhost/myapp/index.php 是两个不同 URL，但指向同一页面。
最稳健的做法是在服务端动态判断当前请求是否对应首页，并直接为对应 标签注入 active 类。PHP 提供了可靠的上下文信息（如 $_SERVER['REQUEST_URI']），可精准识别根路径 /、/index.php 及带查询参数的变体。
✅ 推荐方案：服务端动态添加 active 类（兼容性好、无需 JS 依赖）
修改 sidebar.php，将静态 HTML 改为 PHP 动态逻辑：
<?php // 获取当前请求的原始路径（不含域名和查询参数）
$request_uri = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
// 规范化：根路径 '/' 或 '/index.php' 都视为首页
$isHome = ($request_uri === '/' || $request_uri === '/index.php' || $request_uri === '/myapp/' || $request_uri === '/myapp/index.php');
// 注意：若部署在子目录（如 /myapp/），需根据实际路径调整判断逻辑
// 更健壮写法（自动适配任意子目录）：
$script_name = $_SERVER['SCRIPT_NAME']; // 如 '/myapp/index.php'
$base_dir = dirname($script_name); // 如 '/myapp'
if ($base_dir === '/') {
$isHome = ($request_uri === '/' || $request_uri === '/index.php');
} else {
$isHome = ($request_uri === $base_dir . '/' || $request_uri === $base_dir . '/index.php');
}
?><nav class="side-bar"><ul>
<li>
<a href="index.php" class="category <?php echo $isHome ? 'active' : ''; ?>">
<i class="fi fi-bs-home"></i>
<span>Home</span>
</a>
</li>
<li>
<a href="room.php" class="category <?php echo ($request_uri === '/room.php' || $request_uri === $base_dir . '/room.php') ? 'active' : ''; ?>">
<i class="fi fi-bs-apps"></i>
<span>Room</span>
</a>
</li>
<li>
<a href="contact.php" class="category <?php echo ($request_uri === '/contact.php' || $request_uri === $base_dir . '/contact.php') ? 'active' : ''; ?>">
<i class="fi fi-br-comment-alt"></i>
<span>Contact</span>
</a>
</li>
</ul></nav>
✅ 优势说明：
- 100% 服务端渲染，首屏即高亮，无 FOUC（闪烁）；
- 完美支持 /myapp/、/myapp/index.php、/myapp/?ref=1 等所有首页访问形式；
- 不依赖 JavaScript，禁用 JS 时仍可用；
- 逻辑清晰，易于扩展其他页面（只需复制 ?php echo ... ? 行并修改路径判断）。
⚠️ 补充：若坚持使用 JavaScript 方案（不推荐，仅作备选）
若因架构限制必须用前端判断，需增强 URL 匹配逻辑：
const categoryLinks = document.querySelectorAll('.category');
const currentPath = new URL(window.location.href).pathname; // 仅取路径部分，如 "/myapp/" 或 "/myapp/index.php"
categoryLinks.forEach(link => {
const linkPath = new URL(link.href, window.location.origin).pathname;
// 将 "/myapp/" 和 "/myapp/index.php" 统一归一化为 "/myapp/index.php"
const normalizedLinkPath = linkPath.endsWith('/')
? linkPath + 'index.php'
: linkPath;
// 主页路径统一处理：/myapp/ → /myapp/index.php
const normalizedCurrentPath = currentPath === '/myapp/' || currentPath === '/myapp'
? '/myapp/index.php'
: currentPath;
if (normalizedLinkPath === normalizedCurrentPath) {
link.classList.add('active');
}
});
⚠️ 注意：此 JS 方案需确保 DOM 加载完成后再执行（建议包裹在 DOMContentLoaded 中），且对多级子目录兼容性较弱，不如服务端方案可靠。
✅ 最佳实践总结
- 优先使用服务端判断：利用 $_SERVER['REQUEST_URI'] 或 $_SERVER['SCRIPT_NAME'] 动态生成 active 类，安全、高效、兼容性强；
- 避免硬编码路径：通过 dirname($_SERVER['SCRIPT_NAME']) 自动获取应用根路径，提升可移植性；
- 移除冗余 JS 逻辑：原 JS 代码中 windows.location.href 存在拼写错误（应为 window.location.href），且无法解决路径归一化问题，建议弃用；
- 测试覆盖场景：务必验证 /myapp/、/myapp/index.php、/myapp/?utm=1、/myapp/index.php#section 等常见 URL 形式。
按此方案改造后，无论用户如何访问首页，导航栏“Home”项都将稳定高亮，用户体验一致且专业。
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
