Javascript 从导航链接添加和删除活动类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8379776/
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
Add & remove active class from a navigation link
提问by user782245
I have been looking for tutorials on how to add and remove a class from a link unfortunately without any success. All the earlier questions on this have give me some understanding, but haven't give me the result I want to accomplish.
不幸的是，我一直在寻找有关如何从链接中添加和删除类的教程，但没有成功。前面所有的问题都让我有了一些了解，但并没有给我想要完成的结果。
I'm trying to have an active state for my navigation, by adding and removing a class when the link is clicked.
我试图通过在单击链接时添加和删除一个类来使我的导航处于活动状态。
Here is what I have as far as JavaScript:
就 JavaScript 而言，这是我所拥有的：
$(document).ready(function(){
//active state
$(function() {
$('li a').click(function(e) {
e.preventDefault();
var $this = $(this);
$this.closest('li').children('a').removeClass('active');
$this.parent().addClass('active');
});
});
});
And this is my navigation:
这是我的导航：
<div id="nav">
<div id="main-nav" class="center">
<ul>
<li><a href="/photography.php">Photography</a></li>
<li><a href="/web.php">Web</a></li>
<li><a href="/print.php">Print</a></li>
<li class="nav-R"><a href="/about.php">About</a></li>
<li class="nav-R"><a href="/contact.php">Contact</a></li>
</ul>
</div><!-- close center -->
</div><!-- close-nav -->
回答by AlienWebguy
You're removing the 'active' class from the closest li's child element, and then you're adding the active class to the current a's parent li. In the spirit of keeping the active class on the anchors and not the list items, this will work for you:
您正在从最近li的 子元素中删除 'active' 类，然后将 active 类添加到当前a的 parent li。本着将活动类保持在锚点而不是列表项上的精神，这对您有用：
$('li a').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
The active link is the active link. There'd never be more than one link active at any given time, so there's no reason to be all specific about removing the activeclass. Just remove from all anchors.
活动链接是活动链接。在任何给定时间都不会有多个链接处于活动状态，因此没有理由对删除active类进行所有具体操作。只需从所有锚点中移除即可。
回答by David says reinstate Monica
Try:
尝试：
$(function() {
$('li a').click(function(e) {
e.preventDefault();
var $this = $(this);
$this.closest('ul').find('.active').removeClass('active');
$this.parent().addClass('active');
});
});
Your selector was looking at the parent element of the current ($(this)) aelement, and then looking among the children of that element for an a. The only ain that element is the one you just clicked.
您的选择器正在查看当前 ( $(this))a元素的父元素，然后在该元素的子元素中查找a. 该a元素中唯一的就是您刚刚单击的那个。
My solution instead moves up to the closest uland then finds the element that currently has the class ofactive` and then removes that class.
我的解决方案改为向上移动到最近的ul，然后找到element that currently has the class ofactive`，然后删除该类。
Also your approach, as posted, was adding the activeclass-name to the lielement, and you were looking to remove the class-name from an aelement. My approach uses the li, but that can be amended to use the aby simply removing the parent()from the final line.
此外，您发布的方法是将active类名添加到li元素中，并且您希望从a元素中删除类名。我的方法使用li，但可以a通过简单地parent()从最后一行中删除来修改以使用。
References:
参考：
回答by Adam Rackis
I think you want:
我想你想要：
$this.parents("ul").find("a").removeClass('active');
回答by Melros
Try this:
尝试这个：
$(function() {
$('.start').addClass('active');
$('#main-nav a').click(function() {
$('#main-nav a').removeClass('active');
$(this).addClass('active');
});
});
Just add the class .start to the nav element you want to have the class .active first.
只需将类 .start 添加到您希望首先使用类 .active 的导航元素。
Then declare the class .active in your css like:
然后在你的 css 中声明类 .active ，如：
#main-nav a.active {
/* YOUR STYLING */
}
