ASP.NET 更改列表组锚标记中的活动 class

Question

我在 ASP.NET webforms 应用程序中有一个 MasterPage，我在其中设计了布局。在这里

<div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <div class="list-group ">
                            <a href="UserProfile.aspx" id="dashboard" class="list-group-item list-group-item-action active">Dashboard</a>
                            <a href="AddEmployeeFather.aspx" class="list-group-item list-group-item-action">Add Employee Father</a>
                            <a href="#" class="list-group-item list-group-item-action">Search User</a>
                            <a href="#" class="list-group-item list-group-item-action">Print Information</a>
                            <a href="#" class="list-group-item list-group-item-action">Change Password</a>
                            <a href="#" class="list-group-item list-group-item-action">Logout</a>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server">
                        </asp:ContentPlaceHolder>
                    </div>
                </div>
            </div>

加载时，UserProfile.aspx 有一个突出显示的活动 class。现在我希望如果我单击 AddEmployeeFather.aspx，此列表项将变为活动状态。这是我的 jqyery 代码

        $(document).ready(function () {
                var url = window.location;
                $('.list-group .list-group-item').find('.active').removeClass('active');
                $('.list-group .list-group-item a').each(function () {
                    if (this.href == url) {
                        $(this).parent().addClass('active');
                    }
                });
            });

不知道哪里出了问题。请帮忙。提前致谢

Answer 1

window.location 是一个对象。使用 window.location.href.

然后你可以找到link具有相同url并在link

上设置活动class

$(document).ready(function () {
    var url = window.location.href;
    $('a.list-group-item').each(function () {
        if (this.href == url) {
            $(this).addClass('active');
            return false; // exit the loop
        }
    });
});

ASP.NET 更改列表组锚标记中的活动 class

ASP.NET Changing the active class in list-group anchor tag

c#

asp.net

jquery

master-pages

bootstrap-4