jquery - Jquery在列表中删除并添加新类

Question

我是新来的。所以也许这是一个愚蠢的问题。我在下面有一个CSS代码：

 <ul id="nav">
  <li><h1>Cover</h1><a class="cover" href="#cover"></a></li>
  <li><h1>About</h1><a class="about" href="#about"></a></li>
  <li><h1>CV</h1><a class="cv" href="#cv"></a></li>
  <li><h1>Contact</h1><a class="contact" href="#contact"></a></li>
 </ul>

所以现在当我点击“关于”时，“关于”类将更改为“活动”。与其他行类似。以及如何避免重复“活动”类？

下面是我的 jQuery 代码，但没有任何反应：

$('#nav.about a').click(function() {
   $('#nav.about a').removeClass('about').addClass('active');
});

提前感谢您的帮助。

干杯。

Answer 1

您的选择器错误，选择器#nav.about a查找的元素是具有of和of的a元素的子元素。对于您的 HTML，您正在寻找：给jQuery：idnav classabout#nav a.about'

$('#nav a.about').click(function() {
   $(this).removeClass('about').addClass('active');
});

关于添加的问题，在评论中（如下）：

【如何避免被多次选中的类“活跃”？...当我单击“关于”时，此类设置为“活动”；同样，当我单击“联系”时，此类也设置为“活动”。所以我想同时限制一个“活动”课程。

为此，只需在方法中选择具有该类名的元素click()，如下所示：

$('#nav a.about').click(function() {
   $('#nav a.active').removeClass('active');
   $(this).removeClass('about').addClass('active');
});

参考：

• CSS 选择器。

Answer 2

更改$('#nav.about a')为$('#nav a.about')

$('#nav.about a').click(function() {
   $('#nav a.about').removeClass('about').addClass('active');
});

Answer 3

您需要更改选择器。你所说的是找到一个锚元素，它是具有 ID navAND 类的元素的后代about“。你想要的是下面，它说“找到一个锚标签，其类about是具有 ID 的元素的后代nav：

$('#nav a.about').click(function() {
   $(this).removeClass('about').addClass('active');
});