Javascript 如何使用多个按钮在单击时更改按钮颜色

我有一个按钮，当页面加载其他两个按钮时需要激活。单击非活动按钮时，我需要从另一个按钮中删除活动类，并将其添加到单击的按钮中

$（“按钮”）。单击（函数（）{
单击=真；
如果（单击）{
$（this.toggleClass（'active'）；
单击=真；
}否则{
$（this.removeClass（'active'）；
单击=假；
}
});
.featuredBtn.active{
背景色：#bf9471；
颜色：白色；
}
.特点b{
宽度：250px；
高度：50px；
颜色：#8c8c8c；
字号：700；
背景色：#f4efeb；
边界：无；
字母间距：2px；
大纲：无；
}

按钮一
按钮二
按钮三
代码不起作用，因为
（单击）
将始终为真-每次函数运行时，对于每个按钮，它都被设置为真。如果要检查单击的按钮是否处于活动状态，可以设置变量
clicked=this.getAttribute（'class'）。includes（'active'）
。如果按钮具有激活的
类，则单击的
将为真

但是，我们甚至不需要检查单击的按钮是否处于活动状态-我们可以从所有按钮中删除
active
类，然后使用
$（此）
选择器将其设置为刚刚单击的按钮，如下所示：


$（“按钮”）。单击（函数（）{
$（“按钮”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
});
.featuredBtn.active{
背景色：#bf9471；
颜色：白色；
}
.特点b{
宽度：250px；
高度：50px；
颜色：#8c8c8c；
字号：700；
背景色：#f4efeb；
边界：无；
字母间距：2px；
大纲：无；
}

按钮一
按钮二
按钮三
我希望这能解决您的工作问题，请查看；只需
添加
和
删除
类


$（“按钮”）。单击（函数（）{
$（“按钮”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
});

.featuredBtn.active{
背景色：#bf9471；
颜色：白色；
}
.特点b{
宽度：250px；
高度：50px；
颜色：#8c8c8c；
字号：700；
背景色：#f4efeb；
边界：无；
字母间距：2px；
大纲：无；
}

按钮一
按钮二
按钮三
我建议使用类名“featuredBtn”更精确地指定元素。这将避免在页面上的所有按钮上绑定事件

$(".featuredBtn").click(function() {
   $("button.active").removeClass("active");
   $(this).addClass("active");
});

我要添加的唯一额外内容是首先检查类
active
。其他一切都是个人风格，因为有几种方法可以做到这一点，这里的答案似乎涵盖了这一点

$('.featuredBtn').on('click', function() {
    let featureBtn = $('.featuredBtn');

    if(featureBtn.hasClass('active')) {
        featureBtn.removeClass('active');
        $(this).addClass('active');
    }
});

你可以用它来解决这个问题


$（“按钮”）。单击（函数（）{
if（$（this）.hasClass（“活动”））{
$（此）.removeClass（“活动”）；
}否则{
$（.active”）.removeClass（“active”）；
$（this.addClass（'active'）；
}
});
.featuredBtn.active{
背景色：#bf9471；
颜色：白色；
}
.特点b{
宽度：250px；
高度：50px；
颜色：#8c8c8c；
字号：700；
背景色：#f4efeb；
边界：无；
字母间距：2px；
大纲：无；
}

按钮一
按钮二
按钮三
如果您不打算使用jQuery，那么将其包括进来有什么意义？欢迎使用StackOverflow。请看一看：请详述你的答案并给出补充解释