链接未更改颜色JavaScript

Question

我在互联网上搜索了有关创建类似于单选按钮的链接的帮助，如下所示：

http://jsfiddle.net/CXrgm/6/

但是，在尝试了许多不同的尝试之后，我只是不明白为什么它不起作用。 发生的一切是我的活动链接保持活动状态，而其他任何链接都没有更改为活动类。

 $('.account_links li a').click(function() { $('.account_links li a').removeClass('active'); $(this).addClass('active'); }); 

 .account_links { list-style-type: none; margin-top: 20px; margin-left: 30px; margin-right: 50px; font-family: 'Raleway', sans-serif; font-size: 20px; display: block; } .account_links a { color: #08c; text-decoration: none; } .account_links li { padding-bottom: 30px; } .account_links a:hover { text-decoration: underline; } .account_links .active { color: #08c08c; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class='account_links'> <li><a href='#' class="active">Home</a></li> <li><a href='#'>Shop</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Contact</a></li> </ul> 

我知道我可以将每个网页的每个链接设置为活动状态，但是我正在使用JavaScript“ onclicks”进行操作，但我认为它不会起作用，但是jsfiddle显示的正是我所需要的。

Answer 1

如果您尝试动态实现li，请使用.on绑定其事件。 例如。 $("selector").on("event", function(){}) 。 这样可以确保事件在DOM中创建后将被绑定到该元素。 但是，您的情况似乎是静态html ul li的。 简单来说，这就是您的代码$('.account_links li a').click(function() { $('.account_links li a').removeClass('active'); $(this).addClass('active'); }); 是在做：

• jQuery选择器从右到左起作用。 但是，有例外，例如，当第一个操作数是ID时。 然后，搜索将在具有此ID的元素的上下文中进行。
• 它将具有所有a标记，并查找祖先li，然后查找具有.account_links类的元素。
• 它将定位到单击的元素。
• 它将从定位标记中删除所有活动的类。
• 将活动类添加到单击的元素中，此上下文引用。

您的工作小提琴： Jsfiddle

确保正确包含了JQuery库。