Javascript 如何制作图标'；当单击时，s的活动状态（边框底部：5px纯红色）转换为另一个图标？

每个图标的活动状态都有问题。应该发生的是；单击图标时，该图标下方应出现一条红线（底部边框：5px纯红），然后当您单击下一个图标时，先前单击的图标上的红线消失，而刚才单击的图标上出现红线，依此类推，但当我单击其他两个图标时。红线仅出现在第一个图标上；不管我点击哪一个

函数切换选项卡（）{
const tabs=document.querySelector（“#tabs”）；
tabs.classList.toggle（'active'）；
}

：根目录{
--原色：#e50914；
--深色：#141414；
--浅色：#F4；
}
.内容{
位置：相对位置；
高度：230像素；
宽度：100%；
背景：var（--深色）；
显示器：flex；
对正内容：空间均匀；
对齐项目：居中；
文本对齐：居中；
字体大小：25px；
颜色：灰色；
边框底部：5px实心rgb（70,65,65）；
}
.表1、表2、表3{
光标：指针；
填充：20px；
右侧填充：30px；
左侧填充：30px；
}
.content>div:悬停{
颜色：var（--浅色）
}
#选项卡p{
字号：0.8em；
}
#tabs.active{
边框底部：5px纯红；
}

文件
随时取消

到处看

选择你的价格

不是aby工作的最佳代码

功能切换选项卡（参数）{
const tabs=document.queryselectoral（“.tab”）；
var i；
对于（i=0；i

：根目录{
--原色：#e50914；
--深色：#141414；
--浅色：#F4；
}
.内容{
位置：相对位置；
高度：230像素；
宽度：100%；
背景：var（--深色）；
显示器：flex；
对正内容：空间均匀；
对齐项目：居中；
文本对齐：居中；
字体大小：25px；
颜色：灰色；
边框底部：5px实心rgb（70,65,65）；
}
.表1、表2、表3{
光标：指针；
填充：20px；
右侧填充：30px；
左侧填充：30px；
}
.content>div:悬停{
颜色：var（--浅色）
}
#选项卡p{
字号：0.8em；
}
#tabs.active{
边框底部：5px纯红；
}

文件
随时取消

到处看

选择你的价格

您不能有三个ID相同的项。JS只选择第一个。作为替代项，我该怎么做？使用类而不是ID。谢谢，它起作用了！我不知道querySelector和querySelector是不同的。但我想知道你所说的“不能有三个相同ID的项目。JS只选择第一个”是什么意思。不查询选择全部只将具有相同ID或类的元素放在同一节点列表中。同一类是-同一ID否