Question

我有一个jQuery函数，当单击链接时，它将更改颜色。我的代码将选择clicked元素的父级，并添加一个新的名为“ active”的类，并删除具有活动类的同级中的所有“ active”类。但是，当我执行代码时，它根本没有任何改变。还检查了控制台，活动目录未添加到单击的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>

Answer 1

您应该使用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>

Answer 2

尝试这样使用

$("#menu-links > li").on("click",'a', function() {
    $("#menu-links > li a").parent().addClass('active').siblings().removeClass('active')
})

（或）

$("document").on("click","#menu-links li a" function() {
    $("#menu-links > li a").parent().addClass('active').siblings().removeClass('active')
})

该问题可能是由于在创建＃menu-links列表之前加载了JavaScript所致。如果有问题，第二个代码段将起作用。

链接在单击时不会更改颜色

2 个答案: