使用 JQuery 在导航栏中切换活动类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6459581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle active class in nav bar with JQuery
提问by slandau
<ul>
<li id="tabHome" class="active"><a href="@Href("~")">Home</a></li>
<li id="tabCMDS" ><a href="@Href("~/CMDS")">CMDS</a></li>
<li id="tabServiceMonitor" ><a href="@Href("~/Monitor")">Service Monitor</a></li>
<li id="tabBatchInterface" ><a href="@Href("~/BatchInterface")">Batch Interface</a></li>
</ul>
So I wanted to bind to clickof each of these Id's, and set class="active"on the one that was clicked, and remove it from all others.
所以我想绑定到click这些 Id 中的每一个，并设置class="active"在被点击的那个上，并将它从所有其他人中删除。
I can do the first part, but how can I do the latter?
我可以做第一部分，但我怎么能做后者呢？
回答by Bj?rn
$(function() {
$("li").click(function() {
// remove classes from all
$("li").removeClass("active");
// add class to the one we clicked
$(this).addClass("active");
});
});
It would be wise to give meaningful classes to the <li>'s so you can properly select just those, but you get the idea.
为<li>'s提供有意义的类是明智的，这样你就可以正确地选择那些，但你明白了。
回答by Marlin
No need to bind a click event to each ID but instead bind to all of the list items of this unordered list. Then use the .parent().children() methods. Following should work:
不需要为每个 ID 绑定一个点击事件，而是绑定到这个无序列表的所有列表项。然后使用 .parent().children() 方法。以下应该工作：
$('ul li').click(function(){
$(this).addClass('active');
$(this).parent().children('li').not(this).removeClass('active');
});
回答by Phil Carr
You'll probably find this better (otherwise the page will jump) -
你可能会发现这个更好（否则页面会跳转）-
$(function() {
$("li").click(function() {
// remove classes from all
$("li").removeClass("active");
// add class to the one we clicked
$(this).addClass("active");
// stop the page from jumping to the top
return false;
});
});
回答by Nicola Peluchetti
You can do:
你可以做：
$('li').click(function(e){
e.preventDefault();
$(this).addClass('active');
$(this).siblings().each(function(){
$(this).removeClass('active') ;
});
});
fiddle here http://jsfiddle.net/UVyKe/1/
回答by Stefan Kendall
Give the ul an id or class, and select off of it.
给 ul 一个 id 或类，然后选择关闭它。
<ul id = "nav">...
var $navItems = $('#nav > li');
$navItems.click(function(){
$navItems.removeClass('active');
$(this).addClass('active');
});
回答by Itai Sagi
$("ul li").click(function()
{
$("ul .active").removeClass("active");
$(this).addClass("active");
});
回答by Manthan Vaghani
You can add active class using below single line without using any event
您可以在不使用任何事件的情况下使用以下单行添加活动类
$('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
