Javascript 活动类标题颜色更改（添加/删除类）

我正在处理accordion，这里有两个content div块，我得到了输出，但问题是我的代码不是标准格式，代码行更多。我只想通过使用add/remove类来简化它。我想更改活动选项卡标题的颜色。谁能给我指一下正确的方向吗

$（“.benefits-slide1”）。单击（函数（）{
if（$（“.benefits-slideDiv1”）.hasClass（“noDisplay”））{
$（.benefits-slideDiv1”）.removeClass（“noDisplay”）.show（“slideDown”）；
$（“.benefits-slideDiv2、.benefits-slideDiv3、.benefits-slideDiv4”）.addClass（“noDisplay”）.hide（“slideDown”）；
}
});
$（“.benefits-slide2”）。单击（函数（）{
if（$（“.benefits-slideDiv2”）.hasClass（“noDisplay”））{
$（.benefits-slideDiv2”）.removeClass（“noDisplay”）.show（“slideDown”）；
$（“.benefits-slidedv1、.benefits-slidedv3、.benefits-slidedv4”）.addClass（“noDisplay”）.hide（“slideDown”）；
}
});
$（“.benefits-slide3”）。单击（函数（）{
if（$（“.benefits-slideDiv3”）.hasClass（“noDisplay”））{
$（.benefits-slideDiv3”）.removeClass（“noDisplay”）.show（“slideDown”）；
$（“.benefits-slideDiv1、.benefits-slideDiv2、.benefits-slideDiv4”）.addClass（“noDisplay”）.hide（“slideDown”）；
}
});
$（“.benefits-slide4”）。单击（函数（）{
if（$（“.benefits-slidedv4”）.hasClass（“noDisplay”））{
$（.benefits-slideDiv4”）.removeClass（“noDisplay”）.show（“slideDown”）；
$（“.benefits-slideDiv1、.benefits-slideDiv2、.benefits-slideDiv3”）.addClass（“noDisplay”）.hide（“slideDown”）；
}
});
.slideDiv1{
背景色：红色；
}
.slideDiv2{
背景颜色：蓝色；
}
.slideDiv3{
背景颜色：绿色；
}
.slideDiv4{
背景颜色：粉红色；
}
.noDisplay{
显示：无；
}
div#手风琴示例{
显示器：flex；
弯曲方向：立柱；
}
.福利包装{
背景：#ccc；
高度：100px；
}

个性化健康之旅
内容1

个性化健康之旅
内容2

个性化健康之旅
内容3

个性化健康之旅
内容4

第二内容块
第二部分内容1
第二部分内容2
第二部分内容3
第二部分内容4
这是一个您尝试执行的示例（并非完美），请注意，我在每个按钮中使用了HTML5
数据-*
属性来存储关联的
div
的类名


$（“.benefits”）。单击（函数（）{
让otherButtons=$（“.benefits”）。而不是（$（this））；
其他按钮。同级（“.card body”）.addClass（“noDisplay”）；
otherButtons.parent（）.removeClass（“活动”）；
$（this.parent（）.addClass（“活动”）；
$（'.benefits wrap'）.children（'div'）.addClass（“noDisplay”）；
让divClass=$（this.data（'div'）；
$（`.${divClass}`）.toggleClass（“noDisplay”）；
});
.benefits-slideDiv1{
背景色：红色；
}
.好处-幻灯片2{
背景颜色：蓝色；
}
.好处-幻灯片3{
背景颜色：绿色；
}
.好处-幻灯片4{
背景颜色：粉红色；
}
.noDisplay{
显示：无；
}
div#手风琴示例{
显示器：flex；
弯曲方向：立柱；
}
.福利包装{
背景：#ccc；
高度：100px；
}
.福利-acc.active{
背景颜色：浅蓝色；
}
.福利-根据现行h3{
颜色：绿色；
}

个性化健康之旅
内容1

个性化健康之旅
内容2

个性化健康之旅
内容3

个性化健康之旅
内容4

第二内容块
第二部分内容1
第二部分内容2
第二部分内容3
第二部分内容4
这是一个您尝试执行的示例（并非完美），请注意，我在每个按钮中使用了HTML5
数据-*
属性来存储关联的
div
的类名


$（“.benefits”）。单击（函数（）{
让otherButtons=$（“.benefits”）。而不是（$（this））；
其他按钮。同级（“.card body”）.addClass（“noDisplay”）；
otherButtons.parent（）.removeClass（“活动”）；
$（this.parent（）.addClass（“活动”）；
$（'.benefits wrap'）.children（'div'）.addClass（“noDisplay”）；
让divClass=$（this.data（'div'）；
$（`.${divClass}`）.toggleClass（“noDisplay”）；
});
.benefits-slideDiv1{
背景色：红色；
}
.好处-幻灯片2{
背景颜色：蓝色；
}
.好处-幻灯片3{
背景颜色：绿色；
}
.好处-幻灯片4{
背景颜色：粉红色；
}
.noDisplay{
显示：无；
}
div#手风琴示例{
显示器：flex；
弯曲方向：立柱；
}
.福利包装{
背景：#ccc；
高度：100px；
}
.福利-acc.active{
背景颜色：浅蓝色；
}
.福利-根据现行h3{
颜色：绿色；
}

个性化健康之旅
内容1

个性化健康之旅
内容2

个性化健康之旅
内容3

个性化健康之旅
内容4

第二内容块
第二部分内容1
第二部分内容2
第二部分内容3
第二部分内容4
@fraction Awesome您能否更改标题颜色
个性化健康旅程
上的颜色active@Husna现在查看活动选项卡我想为
添加背景色。福利acc
我曾尝试使用添加/删除类无法获取。您可以帮助我解决此问题。
如果（！$（“.benefits acc”）.children（）.hasClass（“活动”））{$（this.children（）.find（'.bbox'）.removeClass（'bbox'）；$（this.children（）.addClass（'bbox'）；alert（'test'）；}其他{$（this.children（）.removeClass（'bbox'）；alert（'test2'）；}
非常感谢您给我时间来解决这个问题：）。
$（`.${divClass}）.
这个严重的重音符号在IE中不起作用。还有其他方法吗。@Fractiion Awesome您可以更改标题颜色
个性化健康旅程
上的颜色吗active@Husna检查