Javascript 如何将类添加到单击的按钮并将类删除到以前单击的按钮

如何将类添加到单击的按钮并将类删除到先前单击的按钮。我只希望每次单击一个活动按钮

我的html看起来像这样

<div class="nav-button">
   <button id="btn-all">All</button>
   <button id="btn-chicken">Chicken</button>
   <button id="btn-pizza">Pizza</button>
   <button id="btn-pasta">Pasta</button>
   <button id="btn-drinks">Drinks</button>
</div>

$('.nav-button button').on('click', function(){
     $(this).addClass("active")
})

---

我不想逐个选择按钮，因为这组按钮是动态的。我只使用上面的html示例在html中显示我的按钮

您只需首先从所有按钮中删除该类：

因此，您可以：

$（'.nav按钮'）。在（'click'，function（）上{
$（“div.nav-button按钮”）.removeClass（'active'）；
$（此）.addClass（“活动”）；
})

.active{
背景颜色：黄色；
}

全部的
鸡
披萨
意大利面食
饮料

 $("div.nav-button button").removeClass('active');