如何将 class 添加到单击的按钮并删除 class 到先前单击的按钮

Question

如何将 class 添加到单击的按钮，并将 class 删除到先前单击的按钮。 我只想每次点击有一个活动按钮

我的 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>

而我的 jquery 看起来像这样

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

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

Answer 1

您可以简单地首先从所有按钮中删除 class：

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

所以你可以这样做：

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

 .active { background-color: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>