Jquery 单击其他按钮时，如何使所有选定的按钮还原为原始按钮？

当我设计我的开关时，我这样做了：当按下on按钮时，off颜色变回原来的颜色；当按下off按钮时，on按钮变回原来的颜色

但是，当我在div中使用多个开关时，我希望一个开关的on按钮关闭单击的任何其他on按钮。我曾尝试使用以下代码自己编写此代码：

$（“#暗模式，#彩色模式”）。单击（函数（）{
$（'#responsiveoff'）.css({
“背景色”：“d8d8d8”，
“颜色”：“#777777”，
“过渡”：“所有0.2秒轻松”
});
});
#下拉列表>div{
显示：块！重要；
}
身体{
保证金：0自动；
宽度：950px；
/*边框：实心；
边框颜色：黑色*/
背景色：#F2F2；
}
/*--------------导航栏------------*/
#导航栏{
宽度：100%；
背景色：白色；
溢出：自动；
位置：固定；
左：0px；
顶部：0px；
边框底部：实心；
边框宽度：1px；
边框颜色：#d8d8d8；
溢出：隐藏；
z指数：10；
}
#导航集装箱{
最大宽度：950px；
最小宽度：875px；
保证金：0自动；
}
#导航集装箱h1{
浮动：左；
保证金：0自动；
填充顶部：10px；
字体系列：“calibri light”；
字体大小：25px；
字母间距：0.3em；
左边距：5px；
过渡：颜色0.3s；
}
#导航集装箱a{
浮动：对；
显示：块；
填充：15px 15px；
文字装饰：无；
颜色：黑色；
字体系列：“calibri light”，无衬线；
字号：18px；
过渡：背景色0.5s；
}
#导航集装箱a：悬停{
背景色：#F4；
过渡：背景色0.5s；
}
#导航集装箱a：激活{
背景色：#bfbf；
}
#导航集装箱h1：悬停{
颜色：#AAAAA；
过渡：颜色0.3s；
}
#webdsn删除{
填充：75px0；
背景色：rgba（2522522520.95）；
边框底部：实心1px#d8d8；
高度：200px；
位置：固定；
宽度：100%；
左：0px；
顶部：0px；
盒影：0 10px 10px-5px rgba（0,0,0,0.3）；
z指数：9；
显示：无；
}
#webdsn内容{
宽度：950px；
保证金：0自动；
}
#pfdsn下降{
填充：75px0；
背景色：rgba（2522522520.95）；
边框底部：实心1px#d8d8；
高度：200px；
位置：固定；
宽度：100%；
左：0px；
顶部：0px；
盒影：0 10px 10px-5px rgba（0,0,0,0.3）；
z指数：9；
显示：无；
}
#pfdsn含量{
宽度：950px；
保证金：0自动；
}
#bc下降{
填充：75px0；
背景色：rgba（2522522520.95）；
边框底部：实心1px#d8d8；
高度：200px；
位置：固定；
宽度：100%；
左：0px；
顶部：0px；
盒影：0 10px 10px-5px rgba（0,0,0,0.3）；
z指数：9；
显示：无；
}
#bcdsn内容{
宽度：950px；
保证金：0自动；
}
#ldsn下降{
填充：75px0；
背景色：rgba（2522522520.95）；
边框底部：实心1px#d8d8；
高度：200px；
位置：固定；
宽度：100%；
左：0px；
顶部：0px；
盒影：0 10px 10px-5px rgba（0,0,0,0.3）；
z指数：9；
显示：无；
}
#ldsn含量{
宽度：950px；
保证金：0自动；
}
/*----------主题下拉区域--------*/
#交换机容器{
显示器：flex；
证明内容：之间的空间；
填充：15px；
}
#主题下降{
填充：75px0；
背景色：rgba（2522522520.95）；
边框底部：实心1px#d8d8；
位置：固定；
宽度：100%；
左：0px；
顶部：0px；
盒影：0 10px 10px-5px rgba（0,0,0,0.3）；
z指数：9；
显示：无；
}
#主题内容{
宽度：950px；
保证金：0自动；
}
/*--开关--*/
.主题切换{
显示器：flex；
证明内容：之间的空间；
位置：相对位置；
宽度：295px；
}
themename先生{
字体系列：“calibri light”；
字体大小：粗体；
字号：20.5px；
颜色：#777777；
位置：相对位置；
顶部：15.5px；
显示：内联块；
}
#暗箱{
宽度：240px；
}
.开关柜{
背景色：白色；
显示器：flex；
证明内容：之间的空间；
边框：实心2px#d8d8；
边界半径：50px；
宽度：100px；
填充物：5px；
利润率：25px 10px；
}
钮扣{
宽度：37px；
高度：37像素；
边界：无；
边界半径：50px；
背景色：#d8d8d8；
颜色：#777777；
字体系列：“calibri light”；
字号：17px；
字体大小：粗体；
光标：指针；
大纲：无；
}
/*--------------------------------------*/
.子名称容器{
显示：块；
}
.子名称{
颜色：黑色；
边框：实心；
边框宽度：1px；
边界半径：7.5px；
填充：5px15px；
显示：内联；
字体系列：“calibri light”；
字母间距：2.5px；
过渡色：背景色，颜色0.5s；
}
.subname:悬停{
背景色：#3535；
边框颜色：白色；
颜色：白色；
过渡色：背景色，颜色0.5s；
}

家
文件夹
网站设计
海报和传单
名片
标志设计
主题设置
暗模式

在…上
关
色彩模式

在…上
关
响应模式

在…上
关
您在jQuery中看起来相当精明，因此，我将向您介绍我将使用的方法

单击按钮时，我会添加一个
活动的
类。在添加
active
类之前，我将从所有其他元素中删除
active
类

大概是这样的：

$('#some-id button').click(function () {
    $('#some-id .active').removeClass('active');
    $(this).addClass('active')
});

那我就
<div class="switchcontainer" data-theme="colorful">
      <button class="on-btn">ON</button>
      <button class="off-btn">OFF</button>
</div>