导航菜单Active类失效：点击切换后跳回首页无法保留状态

首先得说，你的jQuery逻辑本身没毛病，但为啥没效果？核心原因是导航菜单的<li>里肯定包含了<a>标签，点击<li>的时候，实际触发了<a>的默认跳转行为——页面直接刷新了！你刚用jQuery修改的DOM类还没来得及生效，页面就重新加载了，自然回到服务器初始渲染的状态（首页<li>带active类）。

下面给你两种针对性的解决方案，看你的需求选：

方案一：多页面应用（跳转不同PHP页面） #

如果你的导航是跳转到不同的PHP页面（比如index.php、about.php这类），正确的做法是在每个页面加载完成后，根据当前URL自动给对应导航项加active类，而不是点击时修改（毕竟点击会跳转，前端修改留不住）。

代码示例：

$(document).ready(function() {
    // 获取当前页面的文件名，比如从URL里提取出index.php、contact.php
    var currentPage = window.location.pathname.split('/').pop();
    // 如果是根目录访问（URL末尾没有文件名），默认设为index.php
    if (currentPage === '') {
        currentPage = 'index.php';
    }
    // 找到对应href的<a>标签的父级<li>，添加active，同时移除其他<li>的active
    $('.nav li a[href="' + currentPage + '"]').parent()
        .addClass('active')
        .siblings().removeClass('active');
});

把这段代码放到每个PHP页面的脚本里，页面加载时就会自动识别当前页面，给对应的导航项加上active，首页的active也会被自动移除。

方案二：单页无跳转（AJAX加载内容） #

如果你想做单页应用，点击导航不跳转页面，只刷新内容，那需要阻止<a>标签的默认跳转行为，修改你的原代码：

$('.nav').on('click', 'li a', function(e) {
    // 阻止<a>标签的默认跳转行为
    e.preventDefault();
    // 移除所有<li>的active类
    $('.nav li.active').removeClass('active');
    // 给当前点击的<a>的父级<li>添加active
    $(this).parent().addClass('active');
    // 可选：用AJAX加载对应页面的内容到指定容器
    // 比如 $('#page-content').load($(this).attr('href'));
});

这种方式适合不需要跳转页面，只更新页面部分内容的场景，需要配合AJAX加载逻辑使用。

额外提醒 #

别尝试用e.stopPropagation()阻止冒泡来解决——就算阻止了<li>的事件冒泡，<a>标签的点击事件还是会触发跳转，必须用e.preventDefault()直接阻止<a>的默认行为才行。

内容的提问来源于stack exchange，提问作者Alishah momin