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

Posted 2023-02-22

【中文标题】如何使用 jQuery 在用户单击时在特定 li 上添加活动类

【英文标题】：How to add class active on specific li on user click with jQuery

【发布时间】：2014-02-02 10:02:12

【问题描述】：

我有一个包含某些项目的菜单，当用户 clicks 在任何 li 上时，我希望它的类变为 active。我有如下菜单项：

<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>

它无法与下拉菜单一起使用，而与所有其他没有下拉项目的菜单完美搭配。如何更改它也适用于具有下拉项目列表的菜单项的代码？我也在使用我页面上的更新面板。

【参考方案1】：

 $(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();
    );
);

【参考方案2】：

        // 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')

【讨论】：

描述您所做的更改或指定替换此代码的位置

【参考方案3】：

有点跑题了，但是在开发 Angular2 应用程序时到了这里，我想分享一下，Angular2 会自动将“router-link-active”类添加到活动路由器链接，例如这个：

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

因此，您可以使用 CSS 轻松设置此类链接的样式：

.router-link-active 
    color: red;

【参考方案4】：

//编写javascript方法绑定每个“li”项的点击事件

    function BindClickEvent()
    
    var selector = '.nav li';
    //Removes click event of each li
    $(selector ).unbind('click');
    //Add click event
    $(selector ).bind('click', function()
    
        $(selector).removeClass('active');
        $(this).addClass('active');
    );

    

//页面第一次加载时首先调用该方法

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

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

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

【参考方案5】：

您在标签中同时指定了 jQuery 和 Javascript，所以这两种方法都是。

jQuery

var selector = '.nav li';

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

小提琴：http://jsfiddle.net/bvf9u/

---

纯 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);

小提琴：http://jsfiddle.net/rn3nc/1

---

带有事件委托的jQuery：

请注意，在方法 1 中，处理程序直接绑定到该元素。如果您希望 DOM 更新并注入新的 lis，最好使用事件委托并委托给下一个保持静态的元素，在本例中为 .nav：

$('.nav').on('click', 'li', function()
    $('.nav li').removeClass('active');
    $(this).addClass('active');
);

小提琴：http://jsfiddle.net/bvf9u/1/

细微的差别是处理程序现在绑定到.nav，所以当您单击li 时，事件冒泡 DOM 到.nav，如果如果单击的元素与您的 selector 参数匹配。这意味着新元素不需要绑定到它们的新处理程序，因为它已经绑定到祖先。

这真的很有趣。在此处阅读更多信息：http://api.jquery.com/on/

【讨论】：

我在我的页面中使用更新面板，您的建议不起作用。请您告诉我如何使用更新面板完成此操作。

这个我不熟悉，你们网上有开发版吗？我刚刚发布的纯JS版本你试过了吗？

是的，我已经尝试过了，但它不适用于更新面板。

这只是普通的旧 Javascript，后端框架的选择应该无关紧要。恐怕我需要看到它在行动中提供更多帮助。

谢谢你，但我不能告诉你我没有在线版本。另外，我之前使用更新面板尝试过这个，它是 asp.net 中的 ajax 控件，这工作得很好，但是当我在 li 中添加子项目时，它在下拉情况下不起作用。