Javascript 如何设置活动css选项卡菜单？

我有一个问题，我尝试使用css创建菜单选项卡，我明白了，但问题是我无法在不单击菜单按钮的情况下设置活动选项卡菜单，这是我编写的代码：

函数openCity（evt，cityName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

/*选项卡*/
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#f0ff1e；
颜色：黑色；
}
/*设置选项卡内按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
字号：17px；
}
/*更改悬停按钮的背景色*/
.tab按钮：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
背景色：#ccc；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
}

安特里安
资料
安特里安
塞缪亚

安特里安
资料

---

用此代码替换现有代码

您可以尝试以下操作：

document.getElementById（'antrian'）。className=''；
document.getElementsByClassName（'tablinks'）[0]。类名='active'
功能开放城市（活动、城市）{
如果（城市=='semua'）{
document.getElementById（'antrian'）。className='tabcontent'；
document.getElementById（'semua'）。className=''；
document.getElementById（'antrianBtn'）。className=''；
document.getElementById（'semuaBtn'）。className='active'；
}
如果（城市=='antrian'）{
document.getElementById（'antrian'）。className=''；
document.getElementById（'semua'）。className='tabcontent'；
document.getElementById（'antrianBtn'）。className='active'；
document.getElementById（'semuaBtn'）。className=''；
}
}

/*选项卡*/
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#f0ff1e；
颜色：黑色；
}
/*设置选项卡内按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
字号：17px；
}
/*更改悬停按钮的背景色*/
.tab按钮：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
背景色：#ccc；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
}

安特里安
塞缪亚
安特里安
塞缪亚

请使用

图标创建可复制的样本，包括调用

openCity

。不清楚您想要实现什么。你所面临的情景的一个好例子将有助于其他人更好地帮助你。此外，如果您一开始只想激活“antrian”选项卡，那么应该向其添加一个

活动的
类。您可以根据所需的点击或任何其他事件切换此
活动
类。
<div class="tab">
<button class="tablinks active" onclick="openCity(event, 'antrian')">Antrian</button>
<button class="tablinks" onclick="openCity(event, 'semua')">Data</button>