jquery - 在 Bootstrap 导航中单击导航时，该类会激活但页面不会根据给定的 url 更改

Question

         <ul class="nav navbar-nav" id="navlist">
                                 <li>
                                    <a  href="">
                                            <i title="" class="fa fa-home-o fa-3x"></i><br>
Dashboard                                    </a>
                                </li>
                                    <li>
                                    <a  href="form.html">
                                            <i title="" class="fa fa-building-o fa-3x"></i><br>
                                            Corporate
                                    </a>
                                </li>
                                <li class="dropdown">
                                    <a href="form.html">
                                        <div class="text-center">
                                            <i title="" data-original-title="" class="fa fa-plus-square fa-3x"></i><br>
                                           Offers</div>
                                    </a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="login.html"><i title="" data-original-title="" class="fa fa-unlock-alt"></i> Login</a></li>
                                        <li><a href="page-blank.html"><i title="" data-original-title="" class="fa fa-square-o"></i> Blank Page</a></li>
                                        <li class="divider"></li>
                                        <li><a href="invoice.html"><i title="" data-original-title="" class="fa fa-thumbs-o-up"></i> Invoice</a></li>
                                        <li><a href="princing-table.html"><i title="" data-original-title="" class="fa fa-gavel"></i> Princing Table</a></li>
                                        <li><a href="faq.html"><i title="" data-original-title="" class="fa fa-sun-o"></i> FAQ</a></li>
                                        <li class="divider"></li>
                                        <li><a href="register.html"><i title="" data-original-title="" class="fa fa-plus"></i> Register</a></li>
                                        <li><a href="404.html"><i title="" data-original-title="" class="fa fa-warning"></i> 404 Error</a></li>
                                        <li><a href="500.html"><i title="" data-original-title="" class="fa fa-warning"></i> 500 Error</a></li>
                                    </ul>
                                </li>
</ul>

这是jquery脚本

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

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

    var $parent = $(this).parent();
    if (!$parent.hasClass('active')) {
        $parent.addClass('active');
    }
    e.preventDefault();
});

});

我用过的CSS

<style>.active { color: red; background:#000; }</style>

在 bootstrap 导航中当点击导航时，类被激活但页面不会根据给定的 url 改变我该如何解决这个问题。导航也显示为事件状态并且页面也发生变化

Answer 1

所以我相信页面不会因为 preventDefault() 而改变，即使它改变了，类也会在页面重新加载时丢失。您可以访问 HTML 吗？根据元素的规模，您可以为每个页面上的元素指定一个属性，例如pageX，然后在文档就绪或文档加载时，您可以获得 attr 并将其与菜单项进行比较，并向匹配的菜单项添加一个类。这仅适用于小型元素或您可以自动生成这些类的元素，或许可以通过 cms。