javascript 更改列表元素的活动类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19618863/
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
changing active class for list element
提问by Paul
I'm trying to change the 'active' class for the clicked list item but I'm missing something. Here is what my HTML and jquery look like:
我正在尝试更改单击列表项的“活动”类，但我遗漏了一些东西。这是我的 HTML 和 jquery 的样子：
HTML
HTML
<ul class="additional-menu">
<li class="active"><a href="link1"> Link1</a></li>
<li><a href="javascript:void(0)" id="link2">Link2</a></li>
<li><a href="javascript:void(0)" id="link3">Link3</a></li>
</ul>
jQuery
jQuery
$("#link2").click(function(){
if ($(this).find('#additional-menu li').hasClass('active')) {
//console.log("Active class seen");
$(this).find('#additional-menu li').removeClass('active');
$(this).addClass('active');
}
});
Any idea what I'm missing? I'm not even detecting the active class at this point...
知道我错过了什么吗？在这一点上，我什至没有检测到活动类......
回答by Gabriele Petrioli
You could minimize your code to just
您可以将代码最小化为
$('.additional-menu').on('click','li', function(){
$(this).addClass('active').siblings().removeClass('active');
});
Demo at http://jsfiddle.net/DvHBp/
回答by Arun P Johny
There are many problems in the code
代码有很多问题
//from what i can understand you need to change the active class to the clicked li element not just the link2 element
$("#link2").click(function(){
// additional-menu is not an id it is a class and it is not a descendant of the li element
if ($(this).find('#additional-menu li').hasClass('active')) {
//console.log("Active class seen");
$(this).find('#additional-menu li').removeClass('active');
//if you are using a if statement then addClass should be outside the if block
$(this).addClass('active');
}
});
try
尝试
jQuery(function(){
var $lis = $('.additional-menu > li').click(function(){
$lis.removeClass('active');
$(this).addClass('active')
});
})
回答by Cristian Bitoi
find()get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
查找（）get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element。
You should use
你应该使用
$(this).parent().siblings('#additional-menu li')
$(this).parent().siblings('#additional-menu li')
because in your html structure #link2a tag has no descendant of #additional-menu li
因为在您的 html 结构中#link2，标签没有#additional-menu li
回答by Praveen Kumar Purushothaman
You can make something very generic:
你可以制作一些非常通用的东西：
<ul class="additional-menu">
<li class="active"><a href="#l1"> Link1</a></li>
<li><a href="#l2">Link2</a></li>
<li><a href="#l3">Link3</a></li>
</ul>
And using this JavaScript:
并使用此 JavaScript：
$(function(){
$('.additional-menu > li').click(function(){
$('.additional-menu > li').removeClass('active');
$(this).addClass('active');
});
});
回答by Md. Ashaduzzaman
Try this solution :
试试这个解决方案：
HTML:
HTML：
<ul class="additional-menu">
<li><a id="link1" href="link1"> Link1</a></li>
<li><a href="javascript:void(0)" id="link2">Link2</a></li>
<li><a href="javascript:void(0)" id="link3">Link3</a></li>
</ul>
CSS:
CSS：
.active{
background-color : red;
}
jQuery:
jQuery：
//on first time load set the home menu item active
$(".additional-menu a#link1").addClass("active");
//on click remove active class from all li's and add it to the clicked li
$("a").click(function(){
$("a").removeClass("active");
$(this).addClass("active");
});
