JavaScript【导航栏切换后网页刷新样式不变】

首先，我遇到的问题是我去切换我的导航栏功能，希望我的样式能够切换到我点击的那个导航功能，但是由于切换导航栏功能的时候，它会自动进行网页刷新，导致我所加入的样式又没了，变回初始状态。

我的解决办法：既然它要切换网页，那么它一定有一个改变值，我找到这个改变值，并进行加载判断，那么就可以解决这个问题了。
那么他的改变值是什么呢？
答案就是**URL，网页地址

通过var url = window.location.href; 这个功能可以获取当前网页的地址。
再通过if语句判断，是否是自己想要的URL地址，然后再用JS将所有的关于导航栏功能Class样式删除掉，再添加选中的那个功能样式。
这样问题就解决了

eg:
HTML代码

<li id="ca1" class="menu-list nav-active">
                        <a href=""><i class="fa fa-desktop"></i> <span>会员管理</span></a>
                        <ul class="child-list">
                            <li class="active" id="c1" onclick="class1()">@Html.ActionLink("会员添加", "CustomerAdd", "Default1")</li>
                            <li id="c2" onclick="class2()">@Html.ActionLink("会员信息", "Customerinformation", "Default1")</li>
                        </ul>
                    </li>
                    <li id="ca2" class="menu-list">
                        <a href=""><i class="fa fa-drivers-license"></i> <span>员工管理</span></a>
                        <ul class="child-list">
                            <li id="c3" onclick="class3()">@Html.ActionLink("员工添加", "EmployeeAdd", "Default1")</li>
                            <li id="c4" onclick="class4()">@Html.ActionLink("员工信息", "Employeeinformation", "Default1")</li>
                        </ul>
                    </li>
                    <li id="ca3" class="menu-list">
                        <a href=""><i class="fa fa-desktop"></i> <span>体验用户管理</span></a>
                        <ul class="child-list">
                            <li id="c5" onclick="class5()">@Html.ActionLink("体验用户添加", "eCustomerAdd", "Default1")</li>
                            <li id="c6" onclick="class6()">@Html.ActionLink("体验用户信息", "eCustomerinformation", "Default1")</li>
                        </ul>
                    </li>

JS代码

 //导航栏功能切换
        var url = window.location.href;
        //首页
        if (url == "https://localhost:44359/Default1/CustomerAdd") {
            $(".menu-list").removeClass("nav-active")
            $("li").removeClass("active")
            $("#ca1").addClass("nav-active");
            $("#c1").addClass("active")
        }
        //用户信息
            if (url == "https://localhost:44359/Default1/Customerinformation") {
                $(".menu-list").removeClass("nav-active")
                $("li").removeClass("active")
                $("#ca1").addClass("nav-active");
                $("#c2").addClass("active")
            }
        //管理员添加
        if (url == "https://localhost:44359/Default1/EmployeeAdd") {
            $(".menu-list").removeClass("nav-active")
            $("li").removeClass("active")
            $("#ca2").addClass("nav-active");
            $("#c3").addClass("active")
        }
        //管理员信息
        if (url == "https://localhost:44359/Default1/Employeeinformation") {
            $(".menu-list").removeClass("nav-active")
            $("li").removeClass("active")
            $("#ca2").addClass("nav-active");
            $("#c4").addClass("active")
        }
        //临时用户添加
        if (url == "https://localhost:44359/Default1/eCustomerAdd") {
            $(".menu-list").removeClass("nav-active")
            $("li").removeClass("active")
            $("#ca3").addClass("nav-active");
            $("#c5").addClass("active")
        }
        //临时用户信息
        if (url == "https://localhost:44359/Default1/eCustomerinformation") {
            $(".menu-list").removeClass("nav-active")
            $("li").removeClass("active")
            $("#ca3").addClass("nav-active");
            $("#c6").addClass("active")
        }
    </script>