Javascript 如何使用jQuery在用户单击特定li时添加活动类

我有一个带有特定项目的菜单，我希望当用户

在任何
li
上单击
时，只有它的类变为活动的
。我有如下菜单项：

<ul class="nav">
    <li class="dropdown active">
        <asp:HyperLink ID="hlHome" runat="server" href="Default.aspx">Home</asp:HyperLink>
    </li>
    <li class="dropdown">
        <asp:HyperLink runat="Server" cssClass="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">
            Register
            <i class="icon-angle-down"></i>
        </asp:HyperLink>
        <ul class="dropdown-menu">
            <li><asp:HyperLink runat="server" ID="hlCreateAccount" href="register.aspx">Create Account</asp:HyperLink></li>
            <li><asp:HyperLink runat="Server" href="forgot.aspx" ID="hlForgot">Forgot Credentials ?</asp:HyperLink></li>
            <li><asp:HyperLink runat="server" href="blocked.aspx" ID="hlBlockedAccount">Blocked Account</asp:HyperLink></li>
            <li><asp:HyperLink ID="hlUnblockAccount" href="unblock.aspx" runat="server">Unblock Account</asp:HyperLink></li>
        </ul>
    </li>
    <li><asp:HyperLink  ID="hlBug" runat="server" href="bug.aspx">Report A Bug</asp:HyperLink></li>
    <li><asp:HyperLink ID="hlContact" runat="server" href="contact.aspx">Contact Us</asp:HyperLink></li>
</ul>



家


登记

创建帐户
忘了证件
冻结账户
解除阻止帐户


报告错误
联系我们


我用jQuery尝试了以下代码：

<script type="text/javascript">
    function pageLoad() {
        var loc = window.location.href.split('/');
        var page = loc[loc.length - 1];
        $('ul.nav a').each(function (i) {
            var href = $(this).attr('href');
            if (href.indexOf(page) !== -1) {
                $('ul.nav li.active').removeClass('active');
                $(this).parent().addClass('active');
            }
        });
    }
</script>


函数pageLoad（）{
var loc=window.location.href.split（'/'）；
变量页=位置[位置长度-1]；
$（“ul.nav a”）。每个（功能（i）{
var href=$（this.attr（'href'）；
如果（href.indexOf（第页）！=-1）{
$（'ul.nav li.active'）.removeClass（'active'）；
$（this.parent（）.addClass（'active'）；
}
});
}

它不适用于下拉菜单，而适用于所有其他没有下拉项的菜单。如何更改代码，使其也适用于具有下拉列表的菜单项？我也在使用页面上的更新面板。
您在标记中同时指定了jQuery和Javascript，因此这两种方法都有

jQuery

var selector = '.nav li';

$(selector).on('click', function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});

小提琴：


纯Javascript:

var selector, elems, makeActive;

selector = '.nav li';

elems = document.querySelectorAll(selector);

makeActive = function () {
    for (var i = 0; i < elems.length; i++)
        elems[i].classList.remove('active');

    this.classList.add('active');
};

for (var i = 0; i < elems.length; i++)
    elems[i].addEventListener('mousedown', makeActive);

小提琴：

微妙的区别在于，处理程序现在绑定到
.nav
，因此当您单击
li
时，事件会将DOM冒泡到
.nav
，如果单击的元素与
选择器
参数匹配，则会调用处理程序。这意味着新元素不需要绑定到它们的新处理程序，因为它已经绑定到一个祖先

真的很有趣。请在此处阅读更多信息：
//编写一个javascript方法来绑定每个“li”项的单击事件

//首次加载页面时首次调用此方法

    $( document ).ready(function() {
         BindClickEvent();
    });

//从服务器端调用BindClickEvent方法

    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(Page,GetType(), Guid.NewGuid().ToString(),"BindClickEvent();",true);
    }

有点离题，但在开发Angular2应用程序时来到这里，我想与大家分享，Angular2自动将“路由器链接活动”类添加到活动路由器链接中，例如：

<li><a [routerLink]="['Dashboard']">Dashboard</a></li>

我正在我的页面中使用更新面板，您的建议无效。您能告诉我如何使用更新面板来完成此操作吗？我对此不熟悉，您是否有在线开发版本？你试过我刚刚发布的纯JS版本吗？是的，我试过，但它不适用于更新面板。它只是简单的旧Javascript，你对后端框架的选择应该无关紧要。恐怕我需要看到它的实际应用来帮助更多的人。谢谢你们，但我不能告诉你们我没有在线版本。另外，我以前在asp.net中使用的更新面板是ajax控件时也尝试过这一点，但当我在li中添加子项时，它在下拉框中不起作用。请描述您所做的更改或指定替换此代码的位置
    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(Page,GetType(), Guid.NewGuid().ToString(),"BindClickEvent();",true);
    }

<li><a [routerLink]="['Dashboard']">Dashboard</a></li>

        // Remove active for all items.
        $('.sidebar-menu li').removeClass('active');
        // highlight submenu item
        $('li a[href="' + this.location.pathname + '"]').parent().addClass('active');
        // Highlight parent menu item.
        $('ul a[href="' + this.location.pathname + '"]').parents('li').addClass('active')

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

        $('.dates li a').removeClass('active');

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