CSS Javascript选项卡-添加重复选择器

我有以下基于上示例的代码

函数openCity（evt，cityName）{
变量i，x，t；
x=document.getElementsByClassName（“城市”）；
对于（i=0；i

.w3条{
宽度：100%；
溢出：隐藏；
显示：内联块；
}
.w3黑色，
.w3悬停黑色：悬停{
颜色：#fff！重要；
背景色：#000！重要
}
.w3 bar.w3 bar项{
填充：8px 16px；
浮动：左；
宽度：自动；
边界：无；
大纲：无；
显示：块
}
.w3红色，
.w3悬停红色：悬停{
颜色：#fff！重要；
背景色：#f44336！重要
}

伦敦
巴黎
东京
伦敦
伦敦是英国的首都

巴黎
巴黎是法国的首都

东京
东京是日本的首都

伦敦
巴黎
东京

循环秒数错误。将（i=0；i更改为（i=0；i

city.length！=tablink.长度

使用镜像效果更新

函数openCity（cityName）{
document.queryselectoral（“.city”）.forEach（函数（a）{
a、 style.display=“无”；
})
document.getElementById（cityName）.style.display=“block”；
}
var city=[‘伦敦’、‘巴黎’、‘东京’]
document.queryselectoral（“.tablink”）.forEach（函数（a，b）{
a、 addEventListener（'单击'，函数（））{
document.querySelectorAll（“.tablink”）.forEach（函数（a）{
a、 类列表。删除（'w3-red'）
})
this.classList.add（'w3-red'）
document.getElementsByClassName（'tablink'）[b允许它们独立工作，但我正在尝试让它们镜像instead@jsmitter3查看我的更新答案。我已使用镜像效果更新