Question

我正在使用带有bootstrap3的asp.net 4.0。我在我的母版页中使用了navbar，我尝试使用这个jquery代码来激活当前菜单。以下是代码

$('.nav li a').click(function (e) {
          
            var $this = $(this);
            if (!$this.hasClass('active')) {
                $this.addClass('active');
            }
          
        });

这样可以正常工作但当前菜单页面加载时它会变为非活动状态。如何为当前菜单设置活动？

Answer 1

另一种方式（更复杂）是：

首先，您的母版页设计（导航栏）：

<li id="liContacts" runat="server">
    <a href="Contact.aspx">Contacts</a>
</li>

主页代码背后：

public String linkContacts
{
    get 
    {
        return "not_active";
    }
    set
    {
        liContacts.Attributes.Add("class", "" + value + "");
    }
}

将以下代码添加到“内容”页面的标题中：

<%@ MasterType VirtualPath="~/MasterPage.master" %> <!-- change path to your master page //-->

内容页面的代码背后：

this.Master.linkContacts = "active";

Answer 2

您将css类设置为元素，然后重新加载页面，因此，更改将丢失。完成您尝试做的事情的方法之一是将此js代码添加到您的母版页（为您的案例自定义选择器）：

$(document).ready(function() {
    $('#main-navbar .nav a[href="' + this.location.pathname + '"]').parent().addClass('active');
});

设置导航栏当前菜单处于活动状

2 个答案: