JQuery交换类

我正在学习JQuery，在编写自己的小脚本时遇到了一个问题。所以我有一个导航栏，每次按下一个按钮，它都应该将css类从“btn”切换到“activebtn”。出于测试目的，我只希望能够单击同一个按钮，并让它切换回来，尽管这不会发生。JQuery只是不更新类吗？如果是这种情况，我将如何强制JQuery这样做

<div class="btn">Hello</div>
<div class="btn">World</div>

<script>
$( ".btn" ).click(function() {
    $(this).removeClass('btn');
    $(this).addClass('activebtn');
});

$( ".activebtn" ).click(function() {
    $(this).removeClass('activebtn');
    $(this).addClass('btn');
});
</script>

你好 世界 $（“.btn”）。单击（函数（）{ $（this.removeClass（'btn'）； $（this.addClass（'activebtn'）； }); $（“.activebtn”）。单击（函数（）{ $（this.removeClass（'activebtn'）； $（this.addClass（'btn'）； });

---

应该能够做到：

$( ".btn" ).click(function() {
    $(this).toggleClass('btn activebtn');
});

---

应该能够做到：

$( ".btn" ).click(function() {
    $(this).toggleClass('btn activebtn');
});

---

阅读上的直接和委派事件部分，因为您可以向任何元素添加多个类，所以只需

。切换类（“活动”）

您可以在开发工具检查器中查看jQuery对类的操作。这里的问题是，当jQuery绑定其事件处理程序时，页面加载中不存在

.activebtn

。您需要使用

on（）

或者更好的是，使用tymeJV的解决方案。请阅读上的“直接和委派事件”部分，因为您可以向任何元素添加多个类，所以只需使用

。切换类（'active'）

您可以在开发工具检查器中查看jQuery对类所做的操作。这里的问题是，当jQuery绑定其事件处理程序时，页面加载中不存在

.activebtn

。您需要使用

on（）

或者更好的是，使用tymeJV的解决方案。