使用javascript在单击时关闭“打开”选项卡

我一直在尝试构建一个标签系统，在这个系统中，标签一点击就关闭。当我试图关闭一个打开的选项卡时，它只是保持打开状态

基本上，当我点击一个选项卡时，选项卡打开，当我点击同一个打开的选项卡时，选项卡应该关闭。这就是我一直在努力实现的目标

尝试使用toggle（）方法切换类。在目标选项卡上打开和关闭active，如下所示：

this.classList.toggle("active");

但是，这似乎没有任何作用，因为单击的选项卡始终保持打开状态

我相信这是一件非常简单的事情，但我就是想不出来

我会感谢你的帮助。干杯

const tabs=document.queryselectoral（“.tab”）；
const tabContents=document.queryselectoral（“.tab content”）；
for（设i=0；i

ul{
保证金：0；
填充：0；
}
.标签{
显示：内联块；
边框：1px纯色浅灰色；
填充：10px；
光标：指针；
}
.主动{
背景：浅灰色；
}
.选项卡内容{
显示：无；
填充：10px；
}
.显示内容{
显示：块；
背景：浅灰色；
}

表1
表2
表3

1.Lorem ipsum dolor sit amet，是一位杰出的献身者。
2.Vivamus iaculis是一种智人巧克力，ac调味品。
3.Phasellus aliquam orci neque，non-varius quam gravida vel.

您不能使用

.toggle（）

，因为您在回调中要做的第一件事是从所有元素中删除

活动的

类（这是正确的操作），所以切换只会将其重新打开（与当前情况一样）

相反，您必须跟踪当前单击的选项卡是否与上次单击的选项卡相同，并采取相应的行动

在下面的代码中，我还组合了循环，并使用

.forEach（）

循环语法而不是计数循环，因为

.forEach（）

更简单

而且，除非您有其他需要，否则您不再需要

数据内容

属性

const tabs=Array.from（document.queryselectoral（“.tab”）；
const tabContents=document.queryselectoral（“.tab content”）；
//使用Array.forEach（）语法进行循环，因为它消除了
//建立和管理索引的需要。
tabs.forEach（函数（选项卡）{
tab.addEventListener（“单击”，开关类）；
});
设priorActive=null；//将跟踪最后一个激活的选项卡
函数switchClass（）{
//在标签上循环
tabs.forEach（函数（选项卡，索引）{
tab.classList.remove（“活动”）；//remove-active
tabContents[index].classList.add（“hidden”）；//使用相应的索引隐藏内容
});
//无法使用切换，因为先前的循环刚刚删除了类，所以切换
//将始终将它们添加回。相反，必须显式打开或关闭
//根据目前的情况。
如果（优先级===此）{
此.classList.remove（“活动”）；
tabContents[tabs.indexOf（this）].classList.add（“隐藏”）；
priorActive=null；
}否则{
this.classList.add（“活动”）；
tabContents[tabs.indexOf（this）].classList.remove（“hidden”）；
优先级=此；
}
}

ul{
保证金：0；
填充：0；
}
.标签{
显示：内联块；
边框：1px纯色浅灰色；
填充：10px；
光标：指针；
}
.主动{
背景：浅灰色；
}
.选项卡内容{
背景：浅灰色；
填充：10px；
}
/*默认情况下，选项卡内容将具有此属性*/
.隐藏{
显示：无；
}

选项卡1
选项卡2
选项卡3

1.Lorem ipsum dolor sit amet，是一位杰出的献身者。
2.Vivamus iaculis是一种智人巧克力，ac调味品。
3.Phasellus aliquam orci neque，非varius quam gravida vel.

在这里似乎工作正常。当我单击打开的选项卡时，它不会关闭。您在堆栈溢出中尝试过它吗？它工作得很好。例如，单击选项卡1。它将变得活跃，对吗？现在，单击同一选项卡将其关闭。它会一直开着。这就是问题所在。我希望能够单击打开的选项卡并将其关闭。我明白了。请查看我的答案以获得解决方案。这非常感谢。