Question

我已经在互联网上寻求帮助，可以创建像单选按钮一样工作的链接：

然而，在尝试了许多不同的尝试之后，我只是不知道为什么它不起作用。所有发生的事情是我的活动链接保持活动状态，其他链接都没有变为活动类。

$('.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的元素的上下文中运行。
它将包含所有标签并查找祖先li，然后查找带有.account_links类的元素。
它将定位点击的元素。
它将从锚标记中删除所有活动类。
将活动类添加到单击的元素，ref by（this）context。

你的工作小提琴：Jsfiddle

确保您已正确包含JQuery Library。

链接不改变颜色JavaScript

1 个答案: