时间戳

首页 > 解决方案 > 单击时链接不会改变颜色

jquery - 单击时链接不会改变颜色

问题描述

我有一个 jquery 函数，当点击链接时会改变颜色。我的代码将选择被点击元素的父元素并添加一个名为“活动”的新类，并删除具有活动类的兄弟姐妹中的所有“活动”类。但是当我执行我的代码时，它根本没有改变。还检查了控制台，活动不添加到单击的li。

这是我的代码：

$("#menu-links > li a").on("click", function() {
    $("#menu-links > li a").parent().addClass('.active').siblings().removeClass('.active')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-links">
  <li class="active"><a href="#">HOME</a></li>
  <li> <a href="#">ABOUT ME</a></li>
  <li> <a href="#">PROFILE</a></li>
  <li> <a href="#">CONTACTS</a></li>
</ul>

标签： jqueryhtml

解决方案

您应该this在添加/删除函数中使用和删除类名中的点：

$("#menu-links > li a").on("click", function() {
  $(this).parent().addClass('active').siblings().removeClass('active')
})
a {
  color: black;
  text-decoration: none;
}

.active a {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-links">
  <li class="active"><a href="#">HOME</a></li>
  <li> <a href="#">ABOUT ME</a></li>
  <li> <a href="#">PROFILE</a></li>
  <li> <a href="#">CONTACTS</a></li>
</ul>

推荐阅读