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

Question

我有一个包含某些项目的菜单,我希望当用户点击任何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>

它不适用于下拉菜单,同时与所有其他没有下拉项目的菜单完美配合.如何使用具有项目下拉列表的菜单项更改其工作的代码.我也在我的页面中使用更新面板.

Answer 1

你在标签中指定了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更新并li注入新的s,最好使用事件委托并委托下一个保持静态的元素,在这种情况下.nav:

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

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

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

这真的很有趣.在这里阅读更多相关信息:http://api.jquery.com/on/