javascript forEach循环，在单击时添加两个独立的活动类，并删除以前选择的活动类

/--餐饮容器--
//单击“将活动类添加到选定对象”按钮
让btnContainer=document.querySelector（'.sliderContainers'）；
设btn=document.querySelectorAll（'.sliderContainers\uuuu sliderBtn'）；
btn.forEach（el=>{
el.addEventListener（'click'，函数（）{
btnContainer.querySelector（'.active'）.classList.remove（'active'）；
el.classList.add（'active'）；
});
});
// ---------------------------------------------------------------------
//全球饮食组-------------------------------------
//钮扣
让familyButton=document.getElementById（'family'）；
让specialButton=document.getElementById（'special'）；
让socialButton=document.getElementById（'social'）；
//Txt内容“家庭聚会”“特别活动”“社交活动”
让title=document.getElementById（'title'）；
让description=document.getElementById（'description'）；
//家庭聚会-----------------------------------------------------
familyButton.addEventListener（'单击'，函数（））{
title.textContent=‘家庭聚会’；
description.textContent=“我们喜欢为整个家庭提供餐饮服务。因此，请带上所有人与您的亲人一起享用一顿特别的晚餐。我们将为所有人提供难忘的体验。”；
});
//特别活动--------------------------------------------------------
specialButton.addEventListener（'click'，function（）{
title.textContent=‘特殊事件’；
description.textContent='无论是浪漫晚餐还是与他人一起庆祝的特殊日期，我们都会照顾您。我们一定会为您的特殊日期准备一顿难忘的晚餐'；
});
//社会事件---------------------------------------------------------
socialButton.addEventListener（'单击'，函数（））{
title.textContent=‘社会事件’；
description.textContent='您是否希望举办更大型的社交活动？没问题！我们非常乐意为大型派对提供服务。我们将与您合作，让您的活动成为每个人的热门活动。'；
});
//--------------------------------------------------------------

.indexContainer{
显示：网格；
背景：var（--彩色背景白色）；
网格模板行：最小值（自动，22rem）最小值（自动，52.4rem）重复（2，最小值（自动，68.3rem））最小值（自动，179.2rem）最小值（自动，104rem）最小值（自动，32.8rem）最小值（自动，44rem）；
网格模板列：[完全开始]自动[中心开始]重复（12，[col start]最小最大值（最小内容，5rem）[col end]）[col end]自动[完全结束]；
}
.餐饮集装箱{
网格行：6/7；
格线柱：中心起点/中心终点；
&__内在的{
&-图像桌面{
显示：无；
}
&-图像板{
显示：无；
}
&-形象{
@包括（）项；
最大高度：40雷姆；
}
}
}
.幻灯片内容{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
身高：11.6雷姆；
保证金底部：2.4rem；
顺序：1；
}
.sliderContainers\uuuu sliderBtn{
显示器：flex；
弯曲方向：行反向；
对齐项目：居中；
光标：指针；
不透明度：.5；
}
.sliderContainers\uuu sliderBtn:悬停{
转换：比例（1.1）；
}
.sliderContainers\uuu sliderBtn.active{
不透明度：1；
}
.接触网{
不透明度：0；
高度：2倍；
宽度：7雷姆；
右边距：1rem；
背景：var（--海狸色线）；
}
.cateringLine.active{
不透明度：1；
}
.headingXlrgBold{
字体系列：“斯巴达”，无衬线；
字体大小：粗体；
字体大小：32px；
线高：40px；
字母间距：-0.4px；
}
.头{
字体系列：“斯巴达”，无衬线；
字体大小：粗体；
字号：18px；
线高：28px；
文本对齐：居中；
字母间距：-0.225px；
颜色：#111111；
}
.头状培养基{
字体系列：“斯巴达”，无衬线；
字号：600；
字体大小：14px；
线高：28px；
文本对齐：居中；
文本转换：大写；
字母间距：2px；
颜色：#4c；
//不透明度：0.5；
}
//摘要
.摘要{
字体系列：“斯巴达”，无衬线；
字体大小：15px；
线高：25px；
字母间距：-0.1875px；
文本对齐：居中；
颜色：var（-color text ebonyClay）；
}

家庭聚会
我们喜欢为整个家庭提供餐饮服务。所以请带上所有人和你的亲人一起吃一顿特别的晚餐。我们将为所有人提供难忘的体验。
预定桌子
家庭聚会
特别活动
社会事件

您只需将

链接线

活动样式定义移动到

sliderContainers\uuuu sliderBtn

活动定义中，如下所示。这样，当父对象变为活动状态时，效果将发生

.sliderContainers__sliderBtn.active {
  opacity: 1;
  .cateringLine {
      opacity: 1;
  }
}

---

如果出于某种原因确实需要通过JS添加类，可以如下所示：

btns.forEach(el => {
  el.addEventListener('click', function() {
    btnContainer.querySelectorAll('.active').forEach(el => el.classList.remove('active'));
    el.classList.add('active');
    el.querySelector('.cateringLine').classList.add('active')
  });
});

/--餐饮容器--
//单击“将活动类添加到选定对象”按钮
让btnContainer=document.querySelector（'.sliderContainers'）；
设btns=btnContainer.querySelectorAll（'.sliderContainers\uuuu sliderBtn'）；
btns.forEach（el=>{
el.addEventListener（'click'，函数（）{
btnContainer.queryselectoral（'.active'）.forEach（el=>el.classList.remove（'active'））；
el.classList.add（'active'）；
el.querySelector（'.cateringLine'）.classList.add（'active'））
});
});
// ---------------------------------------------------------------------
//全球饮食组-------------------------------------
//钮扣
让familyButton=document.getElementById（'family'）；
让specialButton=document.getElementById（'special'）；
让socialButton=document.getElementById（'social'）；
//Txt内容“家庭聚会”“特别活动”“社交活动”
让title=document.getElementById（'title'）；
让description=document.getElementById（'description'）；
//家庭聚会-----------------------------------------------------
familyButton.addEventListener（'单击'，函数（））{
title.textContent='系列