Javascript 如何使用CSS网格区域显示选项卡内容

我创建了一个使用CSS网格区域的选项卡式界面。 但是选项卡内容不知何故没有显示，我在控制台中得到一个值

null

代码如下所示：

功能设置选项卡（）{
document.querySelectorAll（'.tabs_按钮'）.forEach（按钮=>{
按钮。addEventListener（'单击'，（）=>{
const边栏=button.parentElement；
const tabs container=document.querySelector（“节”）；
const tabNumber=button.dataset.forTab；
常数tabToActivate=
tabsContainer.querySelector（'.tabs_content[data tab=“${tabNumber}]”）；
控制台日志（选项卡容器）；
console.log（tabNumber）；
console.log（tabToActivate）；
边栏.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（）；
});

表1
表2
表3
表1
Lorem ipsum dolor sit amet，是一位杰出的献身者。非朗卡斯猫的生命。Integer ultrices dolor nisl、vel suscipit dolor tristique ac.Maecenas pellentesque egestas Placelat。相思

表2
这是一个很好的例子。这是一个很好的例子。这是一个完整的封建权杖，它的变种是morbi enim Num faucibus a。法雷特拉和乌尔特里斯。阿利夸乌尔特里斯矢状体或一根十字节杖。
Viverra justo nec ultrices dui sapien eget mi proin。设备缺陷是指设备缺陷和设备缺陷。ultrices mi tempus餐厅的Cursus risus。奥纳雷·埃尼安·尤伊斯莫·尼西元素。
Morbi blandit诅咒ultrices的risus。我要暂时离开。Netus和malesuada以ac turpis egestas integer闻名。葡萄品种间的变异是一种变异。Nam libero justo Laoret sit。利奥维尔发酵素
非枕叶动脉。内图和马莱苏阿达著名的是一只羊。整型quis拍卖商elit sed vulputate mi。佩伦茨克坐在埃米特港口。前庭腔隙。拉奥里特坐着，阿梅特，我们坐着，阿梅特
格言：坐在我身边。这是一个很好的例子。这是一场灾难。埃吉特·杜伊斯（Eget duis）在泰卢斯（tellus）和乌纳调味品（urna调味品）。坐在阿梅特·康塞特图·阿迪皮斯的位子上。在乌尔纳的泰卢斯，有一个权杖。智人
这是我的建议

https://stackoverflow.com/posts/66941962/edit#
表3
Lorem ipsum dolor sit amet，是一位杰出的献身者。非朗卡斯猫的生命。Integer ultrices dolor nisl、vel suscipit dolor tristique ac.Maecenas pellentesque egestas Placelat。菲塞勒斯·康斯奎特·埃拉特·里苏斯。整数
ultrices dolor nisl，vel suscipit dolor tristique ac.Maecenas pellentesque Egestatas Placelat。相思

像这样试试。
你的代码出错了


功能设置选项卡（）{
document.querySelectorAll（'.tabs_按钮'）.forEach（按钮=>{
按钮。addEventListener（'单击'，（）=>{
const边栏=button.parentElement；
const tabs container=document.querySelector（“节”）；
const tabNumber=button.dataset.forTab；
const tabToActivate=tabsContainer.querySelector（`.tabs_content[data tab='${tabNumber}']`）；//在此处出错。
控制台日志（选项卡容器）；
console.log（tabNumber）；
console.log（tabToActivate）；
边栏.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（）；
});
HTML如下所示：
表1
表2
表3
表1
Lorem ipsum dolor sit amet，是一位杰出的献身者。非朗卡斯猫的生命。Integer ultrices dolor nisl、vel suscipit dolor tristique ac.Maecenas pellentesque egestas Placelat。相思

表2
这是一个很好的例子。这是一个很好的例子。这是一个完整的封建权杖，它的变种是morbi enim Num faucibus a。法雷特拉和乌尔特里斯。阿利夸乌尔特里斯矢状体或一根十字节杖。Viverra justo nec ultrices dui sapien eget mi proin。设备缺陷是指设备缺陷和设备缺陷。ultrices mi tempus餐厅的Cursus risus。奥纳雷·埃尼安·尤伊斯莫·尼西元素。Morbi blandit诅咒ultrices的risus。我要暂时离开。Netus和malesuada以ac turpis egestas integer闻名。葡萄品种间的变异是一种变异。Nam libero justo Laoret sit。非枕叶门发酵液。内图和马莱苏阿达著名的是一只羊。整型quis拍卖商elit sed vulputate mi。佩伦茨克坐在埃米特港口。前庭腔隙。老雷特坐着，阿梅特坐着，阿梅特坐着，阿梅特坐着。这是一个很好的例子。这是一场灾难。埃吉特