当页面刷新 jQuery 时，活动类被删除

Question

我的页面上有一个 UL，用作导航。在我的页脚中，我有一些 jQuery 代码，因此当我单击链接时，它会删除 li 上的活动类，然后将其放置在已单击的当前 li 上。当我单击时，这是有效的，但是当页面重新加载时，活动类将返回到前一个 li。

这是我的代码

 jQuery(document).ready(function () {

        "use strict";

        // Init Demo JS
        Demo.init();


        // Init Theme Core
        Core.init();

        $('.sidebar-menu > li').click(function (e) {
            $(".active").removeClass("active");
            $(this).addClass("active");
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav sidebar-menu">
            <li class="sidebar-label pt20">Menu</li>
            <li class="active">
                <a href="/dashboard">
                    <span class="glyphicon glyphicon-home"></span>
                    <span class="sidebar-title">Dashboard</span>
                </a>
            </li>
            <li>
                <a href="/fixtures">
                    <span class="fa fa-calendar"></span>
                    <span class="sidebar-title">Fixtures</span>
                </a>
            </li>
            <li>
                <a href="/players">
                    <span class="glyphicon glyphicon-book"></span>
                    <span class="sidebar-title">Players</span>
                </a>
            </li>
</ul>

我是否在 jQuery 中遗漏了一些东西来将类保持在所需的位置？

Answer 1

你的 JS 会随着刷新而失去上下文。

您可以做的是在加载时运行另一个函数来检查您所在的网址，并根据该网址设置活动状态。像这样的东西：

var setDefaultActive = function() {
    var path = window.location.pathname;

    var element = $(".sidebar-menu a[href='" + path + "']");

    element.addClass("active");
}

setDefaultActive()