Javascript 基于CSS网格的选项卡don’；内容不恰当

我正在设置一个基于JS的标签导航，但不知怎么的，标签内容没有正确显示。 其思想是只显示活动状态的选项卡内容

我只希望选项卡内容显示属于该选项卡的内容

代码如下所示：

功能设置选项卡（）{
document.querySelectorAll（`.tabs\u button`）.forEach（button=>{
按钮。addEventListener（'单击'，（）=>{
const边栏=button.parentElement；
让tabsContainer；
tabsContainer=document.querySelector（`section`）；
const tabNumber=button.dataset.forTab；
常数tabToActivate=
tabsContainer.querySelector（`.tabs_content[data tab='${tabNumber}']`）；
边栏.querySelectorAll（'.tabs_按钮'）.forEach（按钮=>{
按钮.classList.remove（“tabs_按钮--active”）；
});
tabsContainer.querySelectorAll（`.tabs\u content`）.forEach（tab=>{
tab.classList.remove（“tab_内容——活动”）；
});
button.classList.add（“选项卡\按钮--活动”）
tabToActivate.classList.add（“tabs\u content--active”）
});
});
}
document.addEventListener（'DOMContentLoaded'，（）=>{
setupTabs（）；
});
*{框大小：边框框}
.包装纸{
显示：网格；
网格模板柱：150px 1fr；
边框：1px实心#中交；
填充：15px；
保证金：0自动；
网格模板区域：
“主导航”
“主导航”
}
.tabs_侧边栏{
网格区域：导航；
显示器：flex；
弯曲方向：立柱；
背景:#中交;；
}
部分{
显示器：flex；
弯曲方向：行；
弹性收缩：0；
最小高度：400px；
}
.tabs_内容{
网格区域：主；
背景#f6e3e3；
左侧填充：15px；
字号：1rem；
显示：无；
}
.tabs_按钮{
显示：块；
填充：10px；
背景：#eeeeee；
边界：无；
宽度：100%；
大纲：无；
光标：指针；
字号：1rem；
}
.tabs_按钮：活动{
背景：#dddddd；
}
.tabs_按钮：非（：类型的最后一个）{
边框底部：1px实心#CCCC；
}
.tabs_按钮--激活{
字体大小：粗体；
右边框：3px实心#009879；
背景：#dddddd；
}
.tabs\u内容--活动{
显示：块；
}

表1
表2
表3
表1
Lorem ipsum dolor sit amet

表2
努克-维利苏斯酒店

表3
同侧阴唇

我修改了使用的类名，因为我被类似的名称弄糊涂了。我认为这也许与你希望达到的目标相符


功能设置选项卡（）{
常量clickhandler=函数（e）{
const tabs container=document.querySelector（'section.tabs_content'）；
const tabToActivate=tabsContainer.querySelector（“[data tab=“”+this.dataset.forTab+”]”）；
this.parentNode.querySelectorAll（'.tabs_按钮'）.forEach（按钮=>{
删除（'tabs_button--active'）；
});
tabsContainer.querySelectorAll（'div'）.forEach（tab=>{
tab.classList.remove（'active'）；
});
this.classList.add（'tabs\u按钮--active'）
tabToActivate.classList.add（'active'）
};
document.querySelectorAll（'.tabs_按钮'）.forEach（按钮=>{
addEventListener（'click'，clickhandler）；
});
}
document.addEventListener（'DOMContentLoaded'，setupTabs）
*{框大小：边框框}
.包装纸{
显示：网格；
网格模板柱：150px 1fr；
边框：1px实心#中交；
填充：15px；
保证金：0自动；
网格模板区域：
“主导航”
“主导航”
}
.tabs_侧边栏{
网格区域：导航；
显示器：flex；
弯曲方向：立柱；
背景:#中交;；
}
部分{
显示器：flex；
弯曲方向：行；
弹性收缩：0；
最小高度：400px；
}
.tabs_内容{
网格区域：主；
背景#f6e3e3；
左侧填充：15px；
字号：1rem；
显示：块；
}
.tabs_按钮{
显示：块；
填充：10px；
背景：#eeeeee；
边界：无；
宽度：100%；
大纲：无；
光标：指针；
字号：1rem；
}
.tabs_按钮：活动{
背景：#dddddd；
}
.tabs_按钮：非（：类型的最后一个）{
边框底部：1px实心#CCCC；
}
.tabs_按钮--激活{
字体大小：粗体；
右边框：3px实心#009879；
背景：#dddddd；
}
.tabs_content>div{display:none；}
.tabs\u content>.active{display:block；}

表1
表2
表3
表1
内容表1

表2
内容表2

表3
内容表3

请注意您的输入有误

您可以修改此行：

tab.classList.remove("tab_content--active");

为此：

tab.classList.remove("tabs_content--active");

它将按预期工作，为单击的按钮及其相应的数据选项卡切换xxxx活动类。
查看与此相关的CSS可能会很有用。您是否使用显示属性进行hidi