如何使用jQuery在用户单击时在特定li上添加活动类 [英] How to add class active on specific li on user click with jQuery
问题描述
我有一个包含某些项目的菜单，我希望当用户点击任何li时，只有它的类成为活动类。我有以下菜单项：
< ul class =nav>
< li class =dropdown active>
< asp：HyperLink ID =hlHomerunat =serverhref =Default.aspx> Home< / asp：HyperLink>
< / li>
< li class =dropdown>
< asp：HyperLink runat =ServercssClass =dropdown-toggledata-toggle =dropdowndata-hover =dropdowndata-delay =0data-close-others =false href =＃>
注册
< i class =icon-angle-down>< / i>
< / asp：HyperLink>
< ul class =dropdown-menu>
< li>< asp：HyperLink runat =serverID =hlCreateAccounthref =register.aspx>创建帐户< / asp：HyperLink>< / li>
< li>< asp：HyperLink runat =Serverhref =forgot.aspxID =hlForgot>忘记凭证？< / asp：HyperLink>< / li>
< li>< asp：HyperLink runat =serverhref =blocked.aspxID =hlBlockedAccount>阻止帐户< / asp：HyperLink>< / li>
< li>< asp：HyperLink ID =hlUnblockAccounthref =unblock.aspxrunat =server>取消屏蔽帐户< / asp：HyperLink>< / li>
< / ul>
< / li>
< li>< asp：HyperLink ID =hlBugrunat =serverhref =bug.aspx>报告错误< / asp：HyperLink>< / li>
< li>< asp：HyperLink ID =hlContactrunat =serverhref =contact.aspx>联系我们< / 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（页面）！== -1）{
$（'ul.nav li.active'）。removeClass（'active'）;
$（this）.parent（）。addClass（'active' ）;
}
}）;
}
< / script>
在与所有其他没有下拉项目的菜单完美配合时，它无法使用下拉菜单。如何使用具有项目下拉列表的菜单项更改其工作的代码。我也在我的页面中使用更新面板。
你在标签中指定了jQuery和Javascript，所以这里有两种方法。 / p>
jQuery
var selector =' .nav li';
$（选择器）.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 with事件委托：
请注意，在方法1中，处理程序直接绑定到该元素。如果您希望更新DOM并注入新的 li ，那么最好使用事件委托并委托下一个保持静态的元素，在这种情况下 .nav ：
$（'。nav'）。 （'click'，'li'，function（）{
$（'。nav li'）。removeClass（'active'）;
$（this）.addClass（'active'）;
}）;
小提琴： http://jsfiddle.net/bvf9u/1/
细微差别在于处理程序绑定到 .nav 现在，所以当您点击 li 事件起泡时，将DOM添加到 .nav 如果单击的元素与选择器参数匹配，则调用处理程序。这意味着新元素不需要绑定到它们的新处理程序，因为它已经绑定到祖先。
这真的很有趣。在此处阅读更多相关信息： http://api.jquery.com/on/
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>
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');
}
});
}
</script>
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.
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');
});
Fiddle: http://jsfiddle.net/bvf9u/
Pure 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);
Fiddle: http://jsfiddle.net/rn3nc/1
jQuery with event delegation:
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');
});
Fiddle: http://jsfiddle.net/bvf9u/1/
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.
It's really quite interesting. Read more about it here: http://api.jquery.com/on/
这篇关于如何使用jQuery在用户单击时在特定li上添加活动类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
