Javascript 如何在一个选项卡打开时删除其他选项卡

因此，我有一个基本的选项卡模块，它应该在单击按钮后显示其各自的内容。我已经设法使它打开，并显示内容一旦点击。然而，其他的也保持开放

我的问题是：当一个选项卡被单击并打开，其他选项卡被隐藏时，我如何做到这一点

const-button=document.querySelectorAll（'.tabButton'）；
按钮。forEach（功能（btn）{
btn.addEventListener（'click'，tabClick，false）；
})
函数选项卡单击（事件）{
让currentTab=document.querySelectorAll（'.active'）；
currentTab.forEach（函数（选项卡）{
tab.className=tab.className.replace（'active'，''）；
event.target.parentElement.className+=“活动”；
document.getElementById（event.target.href.split（'#'）[1]）.classList.add（'on'）；
})
};






标题
同侧阴唇

标题
Lorem ipsum dolor sit2

标题
Lorem ipsum dolor sit3

看起来好像您正在使用CSS类
.on
应用样式，因此在设置之前，您可以使用
.tabiner
获取所有选项卡内容
div
并删除
。on
类：
文档.queryselectoral（'.tabiner'）.forEach（el=>el.classList.remove（'on'）

您的问题没有包含任何样式，因此我的代码基于这样的假设，即
类上的
.on正在处理显示样式

下面是我想你想要的工作片段。我修改了JS代码的一些部分，使之一致地使用
classList
，并将其替换为箭头函数
（）=>{}


const-button=document.querySelectorAll（'.tabButton'）；
forEach（btn=>btn.addEventListener（'click'，tabClick，false））；
函数选项卡单击（事件）{
const currentTab=document.querySelectorAll（'.active'）；
currentTab.forEach（选项卡=>{
tab.classList.remove（'active'）；
event.target.parentElement.classList.add（'active'）；
document.queryselectoral（'.tabiner'）.forEach（el=>el.classList.remove（'on'））；
document.getElementById（event.target.href.split（'#'）[1]）.classList.add（'on'）；
})
};
.tabInner{
显示：无；
}
塔宾先生{
显示：块；
}






标题
同侧阴唇

标题
Lorem ipsum dolor sit2

标题
Lorem ipsum dolor sit3

您可以在此处获得一个通用示例：