求助：基于当前URL为li添加active类时href为index.php不生效

安全阿岳

2026-5-6

解决li元素active类匹配失效的问题

问题原因分析

你的问题本质是绝对URL与相对URL的匹配逻辑冲突：

当<a>标签的href设为index.php时，浏览器会自动把它解析成完整的绝对URL（比如http://your-site.com/index.php）。
如果当前页面的URL是根路径（比如http://your-site.com/），window.location.href的值就是这个根路径，和解析后的index.php绝对URL直接用===全等比较时，自然不匹配，所以is-current类加不上。
而当href为空时，浏览器会把它解析为当前页面的完整URL，和window.location.href完全一致，因此匹配成功。

解决方案（推荐第一种）

方案1：基于路径名匹配（更健壮）

这种方法提取URL的路径部分进行对比，不管当前URL是根路径还是带index.php，都能准确匹配：

jQuery(function($) {
    // 获取当前页面的路径名（比如 "/index.php" 或 "/"）
    let currentPath = window.location.pathname;
    // 根路径默认匹配index.php
    if (currentPath === '/') {
        currentPath = '/index.php';
    }

    $('ul li a').each(function() {
        // 解析a标签的href为URL对象，提取路径名
        const linkPath = new URL(this.href).pathname;
        if (linkPath === currentPath) {
            $(this).parent().addClass('is-current');
        }
    });
});

方案2：修正原逻辑的URL匹配

如果你想保留原代码的思路，可以手动处理根路径的URL，让它和index.php的绝对URL对齐：

jQuery(function($) {
    let path = window.location.href;
    // 如果当前URL以/结尾，拼接上index.php
    if (path.endsWith('/')) {
        path = path + 'index.php';
    }

    $('ul li a').each(function() {
        if (this.href === path) {
            $(this).parent().addClass('is-current');
        }
    });
});