访问不带index.php的目录路径时首页active类不生效问题

项目结构 #

myapp
├── index.php
├── apps.php
├── contact.php
└── sidebar.php

现有实现 #

• 公共侧边栏sidebar.php代码：

<nav class="side-bar">
        <ul>
            <li>
                <a href="index.php" class="category" >
                    <i class="fi fi-bs-home"></i>
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a href="room.php" class="category">
                    <i class="fi fi-bs-apps"></i>
                    <span>Room</span>
                </a>
            </li>
            <li>
                <a href="contact.php" class="category">
                    <i class="fi fi-br-comment-alt"></i>
                    <span>Contact</span>
                </a>
            </li>
            </ul>
</nav>

• 各业务页面通过<?php include('sidebar.php'); ?>引入侧边栏组件。
• 原有高亮逻辑JS（原代码存在笔误：windows应为window）：

const category = document.querySelectorAll('.category');
const activePage = window.location.href;
category.forEach(link =>{
    if(link.href === activePage){
        link.classList.add('active');
    }
})

问题原因 #

访问../myapp/这类目录路径时，服务器默认加载index.php，但此时window.location.href的值是目录路径（末尾带/，不带index.php），和首页a标签解析出来的完整href（带index.php）完全不相等，所以匹配失败，无法添加active类。

修复方案 #

方案1：修正JS匹配逻辑（前端处理） #

不需要改PHP代码，只需要把JS的精确匹配改成路径归一化后匹配，自动兼容目录访问和index.php访问两种场景：

const category = document.querySelectorAll('.category');
// 把当前路径统一处理：去掉末尾的index.php、去掉末尾斜杠，消除格式差异
const normalizePath = (path) => {
  const url = new URL(path, window.location.origin);
  return url.pathname.replace(/\/index\.php$/i, '').replace(/\/+$/, '');
}
const currentNormalized = normalizePath(window.location.href);

category.forEach(link =>{
    const linkNormalized = normalizePath(link.href);
    // 根目录访问时normalize后是空字符串，首页链接normalize后也是空字符串，自动匹配
    if(linkNormalized === currentNormalized){
        link.classList.add('active');
    }
})

这个方案会自动处理所有入口文件匹配场景，不管是访问目录还是访问具体php文件，都能正确匹配。

方案2：PHP端直接输出active类（推荐，更稳定） #

前端JS匹配存在加载延迟，可能出现页面加载完导航先不高亮、过一会才高亮的闪烁问题，直接在PHP渲染侧边栏的时候判断当前页面，给对应导航项加active类更可靠：
修改sidebar.php代码如下：

<?php
// 归一化当前访问路径
$requestPath = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$currentFile = '';
// 目录访问默认对应index.php
if (substr($requestPath, -1) === '/') {
    $currentFile = 'index.php';
} else {
    $currentFile = basename($requestPath);
}
?>
<nav class="side-bar">
        <ul>
            <li>
                <a href="index.php" class="category <?php echo $currentFile === 'index.php' ? 'active' : ''; ?>" >
                    <i class="fi fi-bs-home"></i>
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a href="room.php" class="category <?php echo $currentFile === 'room.php' ? 'active' : ''; ?>">
                    <i class="fi fi-bs-apps"></i>
                    <span>Room</span>
                </a>
            </li>
            <li>
                <a href="contact.php" class="category <?php echo $currentFile === 'contact.php' ? 'active' : ''; ?>">
                    <i class="fi fi-br-comment-alt"></i>
                    <span>Contact</span>
                </a>
            </li>
            </ul>
</nav>

兼容提示：上述判断写法兼容所有PHP版本，如果是PHP8.0+也可以用str_ends_with($requestPath, '/')替换末尾斜杠判断逻辑。

内容的提问来源于stack exchange，提问作者dara wat