点击切换Active类但e.preventDefault()阻止href跳转的问题

我实现了点击菜单链接时添加和移除active类的功能，但点击链接时无法跳转到对应页面（比如点击“Shop”链接无法打开category.html）。相关代码如下：

现有代码 #

jQuery 代码 #

$(document).ready(function () {
$('.menu li a').click(function(e) {

    $('.menu li.active').removeClass('active');

    var $parent = $(this).parent();
    $parent.addClass('active');
    e.preventDefault();
 });
});

HTML 代码 #

<div class="header-left">
    <a href="index.html" class="logo">
        <img src="assets/images/C&M logo.png" alt="Molla Logo"
             width="105" height="25">
    </a>

    <nav class="main-nav">
        <ul class="menu sf-arrows">
            <li class="megamenu-container active">
                <a href="index-2.html" class="sf-with-ul">Home</a>
            </li>
            <li>
                <a href="category.html" class="sf-with-ul">Shop</a>
            </li>
            <li>
                <a href="blog-listing.html" class="sf-with-ul">Blog</a>
            </li>
        </ul><!-- End .menu -->
    </nav><!-- End .main-nav -->

</div><!-- End .header-left -->

问题原因 #

核心问题出在e.preventDefault()这一行：它会强制阻止浏览器执行链接的默认跳转行为，所以active类切换正常，但页面不会跳转到目标URL。

解决方案 #

方案1：直接移除e.preventDefault() #

如果没有特殊需求需要阻止默认行为，删掉这行代码即可恢复跳转功能：

$(document).ready(function () {
$('.menu li a').click(function(e) {
    $('.menu li.active').removeClass('active');
    var $parent = $(this).parent();
    $parent.addClass('active');
    // 移除 e.preventDefault()
 });
});

方案2：手动触发跳转（适用于需先执行逻辑再跳转的场景） #

如果必须先完成active类切换等逻辑再跳转，可以手动获取链接地址并触发跳转：

$(document).ready(function () {
$('.menu li a').click(function(e) {
    $('.menu li.active').removeClass('active');
    var $parent = $(this).parent();
    $parent.addClass('active');
    
    // 手动获取链接并跳转
    var targetUrl = $(this).attr('href');
    window.location.href = targetUrl;
 });
});

补充：页面加载时保持对应菜单的active状态 #

页面跳转后，新页面的active类会丢失（因为页面刷新），可以在页面加载时自动匹配当前URL，给对应菜单添加active类：

$(document).ready(function () {
    // 页面初始化时设置active类
    var currentPath = window.location.pathname;
    $('.menu li a').each(function() {
        var linkHref = $(this).attr('href');
        if (currentPath.includes(linkHref)) {
            $('.menu li.active').removeClass('active');
            $(this).parent().addClass('active');
            return false;
        }
    });

    // 点击切换active类
    $('.menu li a').click(function(e) {
        $('.menu li.active').removeClass('active');
        var $parent = $(this).parent();
        $parent.addClass('active');
    });
});

内容的提问来源于stack exchange，提问作者P S