单击时添加和删除活动类但防止默认停止对 href (html) 的操作

Question

CSS

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

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

    var $parent = $(this).parent();
    $parent.addClass('active');
    e.preventDefault();
 });\[enter image description here\](https://i.stack.imgur.com/v4C2I.png)
});

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 -->

运行时，它正在添加和删除活动，但点击SHOP时没有显示categories.html。请帮我！谢谢！