PHP循环生成ul列表中a标签增删类失效及jQuery 404报错问题排查

1. 报错原因梳理 #

• 404报错：两个可能来源，一是jQuery引入路径错误，二是CSS中引用的images/templatemo_menu_hover.jpg图片路径不存在
• $(document).on('ready', () => {报错：该写法在jQuery 3.0+版本已被废弃，属于语法使用错误
• 类无法添加到锚点标签：路径匹配逻辑错误、PHP生成的菜单href属性与jQuery查找的规则不匹配

2. 逐点修复方案 #

jQuery代码修正 #

废弃的ready写法替换为官方标准写法，同时修正路径提取逻辑，确保和菜单href规则匹配：

// 标准ready事件写法，也可简写为 $(() => { ...... })
$(document).ready(() => {
    // 提取路径最后一段作为页面名，避免多级路径下替换错误
    const pageName = location.pathname.split('/').pop().replace('.php', '');
    // 匹配规则和PHP生成的href规则对齐，不需要强制加.php后缀
    const $activeMenu = $(`#templatemo_menu a[href="${ pageName || 'index' }"]`);
    $activeMenu.addClass("current");
});

PHP代码修正 #

修正循环逻辑，补全a标签输出逻辑，确保href属性和jQuery匹配规则一致：

<?php
$res = mysqli_query($con,"SELECT * FROM menu");
// 替换有风险的do-while循环，避免空查询时报错
while($row = mysqli_fetch_assoc($res)){
    $href = $row['title'];
    if( $href == 'Home'){
        $href = 'index';
    }
    if( $href == 'Contact Us'){
        $href = 'contact';
    }
    // 补全输出a标签的逻辑，href和jQuery匹配规则对齐
    echo "<li><a href=\"{$href}\">{$row['title']}</a></li>";
}
?>

404报错修复 #

• 检查jQuery引入路径，确认本地存放路径正确即可
• 确认images/templatemo_menu_hover.jpg文件存在，路径填写正确，相对路径可替换为绝对路径避免目录层级导致的加载错误

内容的提问来源于stack exchange，提问作者Azizxon Zufarov