当用户直接访问网站根目录（如 http://localhost/myapp/）时，服务器默认加载 index.php，但此时 url 中不包含 index.php，导致 javascript 判断失败、首页导航项无法高亮；本文提供前后端结合的可靠解决方案。
当用户直接访问网站根目录（如 http://localhost/myapp/）时，服务器默认加载 index.php，但此时 url 中不包含 index.php，导致 javascript 判断失败、首页导航项无法高亮；本文提供前后端结合的可靠解决方案。
要解决“访问 /myapp/ 时首页链接不激活”的问题，核心在于：不能仅依赖 JavaScript 比较 link.href 与 location.href 的字面相等性——因为浏览器地址栏显示的是 /myapp/，而 的 link.href 解析后为完整绝对路径（如 https://www.php.cn/link/ca2445e7441dd680e47e261c1b3a3e59），二者天然不等。
✅ 推荐采用 PHP 服务端动态判断 + 语义化类名注入 方案，既稳定又无需额外 JS 逻辑：
✅ 正确做法：在 sidebar.php 中使用 PHP 动态添加 active
首先，确保 sidebar.php 在被包含时能获取当前请求的页面标识。修改 sidebar.php 如下（注意：需在支持 PHP 的环境中运行）：
<?php // 获取当前请求的脚本文件名（不含扩展名和查询参数）
$requestUri = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$currentPage = basename($requestUri, '.php');
// 特殊处理根路径：/myapp/ 或 /myapp/index.php → 都视为 'index'
if ($currentPage === '' || $currentPage === 'index') {
$currentPage = 'index';
}
?><nav class="side-bar"><ul>
<li>
<a href="index.php" class="category <?php echo $currentPage === 'index' ? 'active' : ''; ?>">
<i class="fi fi-bs-home"></i>
<span>Home</span>
</a>
</li>
<li>
<a href="apps.php" class="category <?php echo $currentPage === 'apps' ? 'active' : ''; ?>">
<i class="fi fi-bs-apps"></i>
<span>Room</span>
</a>
</li>
<li>
<a href="contact.php" class="category <?php echo $currentPage === 'contact' ? 'active' : ''; ?>">
<i class="fi fi-br-comment-alt"></i>
<span>Contact</span>
</a>
</li>
</ul></nav>
? 关键点说明：
- parse_url(..., PHP_URL_PATH) 安全提取路径部分，避免 QUERY_STRING 干扰；
- basename(..., '.php') 自动剥离 .php 后缀，统一为 index/apps/contact；
- 根路径 /myapp/ → $_SERVER['REQUEST_URI'] 为 /myapp/ → parse_url 得 /myapp/ → basename 得空字符串 '' → 显式映射为 'index'；
- 所有页面（index.php、/myapp/、/myapp/?ref=1）均能正确识别为首页。
⚠️ 不推荐的纯前端修复（仅作对比参考）
若坚持用 JS，可增强匹配逻辑（但存在边界风险）：
const categoryLinks = document.querySelectorAll('.category');
const currentPath = new URL(window.location.href).pathname;
const normalizedPath = currentPath.endsWith('/')
? currentPath.slice(0, -1)
: currentPath;
categoryLinks.forEach(link => {
const linkPath = new URL(link.href).pathname;
// 匹配 /myapp/ 和 /myapp/index.php 两种情况
if (linkPath === normalizedPath ||
(linkPath === '/myapp/index.php' && normalizedPath === '/myapp')) {
link.classList.add('active');
}
});
⚠️ 缺陷：硬编码路径（/myapp）、未处理子目录部署、对重写规则（如 Apache mod_rewrite）不友好，强烈建议优先使用服务端方案。
✅ 最佳实践总结
- ✅ 服务端判定更可靠：PHP 在渲染阶段即确定状态，无竞态、无兼容性问题；
- ✅ 语义清晰：$currentPage 变量明确表达当前逻辑页，便于后续扩展（如多级菜单、权限控制）；
- ✅ 零 JS 依赖：首屏即高亮，提升用户体验与 SEO 友好性；
- ❌ 避免 window.location.href === link.href 的原始写法——它本质是 URL 字符串精确匹配，而 Web 服务器路由语义远比字符串复杂。
通过以上改造，无论用户访问 http://localhost/myapp/、https://www.php.cn/link/ca2445e7441dd680e47e261c1b3a3e59 还是 https://www.php.cn/link/ca2445e7441dd680e47e261c1b3a3e59?debug=1，首页导航项都将稳定获得 active 类，实现真正健壮的导航高亮。
