李＆QUOT;如何在特定的＆QUOT添加类（活动）;用户点击使用jQuery [英] How to add class (active) on specific "li" on user click with jQuery

问题描述

我有一定的菜单项的菜单，当用户点击任何丽不仅仅是同级车成为活动类我想要的。我有一个菜单项下面的一样：

I have a menu with certain items and I want when a user clicks on any li than only its class becomes an active class. I have a menu items like following:

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

和我曾尝试以下code使用jQuery：

And I have tried the following code with 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');
             }
         });
     }

它不降工作下拉菜单，而工作完美与不具有下拉项的所有其他菜单。我怎样才能改变code，它的作品也具有下拉项目列表的菜单项。我也使用更新面板在我的网页。

Its not working with the drop down menus while working perfect with all other menus not having drop down items. How can I change the code that it works too with menu item having drop down list of items. I am also using update panel in my page.

推荐答案

您在标签中指定的jQuery都和Javascript所以这里有两种方法。

You specified both jQuery and Javascript in the tags so here's both approaches.

的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更新和新的里 s到被注入，最好是使用事件代表团，并委托将保持静态的下一个元素，在这种情况下，在 .nav ：

Please note that in approach 1, the handler is directly bound to that element. If you're expecting the DOM to update and new lis to be injected, it's better to use event delegation and delegate to the next element that will remain static, in this case the .nav:

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

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

微妙的不同之处在于处理程序绑定到 .nav 现在，所以当你点击里事件的气泡的了DOM的 .nav 如果元素单击的调用处理程序相匹配的选择参数。这意味着，新元素将不再需要绑定到这些新的处理器，因为它已经绑定到一个祖先。

The subtle difference is that the handler is bound to the .nav now, so when you click the li the event bubbles up the DOM to the .nav which invokes the handler if the element clicked matches your selector argument. This means new elements won't need a new handler bound to them, because it's already bound to an ancestor.

这真的很有趣。了解更多关于在这里：​​ http://api.jquery.com/on/

It's really quite interesting. Read more about it here: http://api.jquery.com/on/

这篇关于李＆QUOT;如何在特定的＆QUOT添加类（活动）;用户点击使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！