如何使用HTML、CSS和JavaScript让多个选项卡部分在加载时打开第一个选项卡？

我已经在我的网页中添加了多个选项卡部分，但我很难确保第二个选项卡部分在加载时也打开第一个选项卡。我目前正在学习W3Schools的教程，这是我到目前为止关于W3Schools的代码：

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

在本例中，我们使用JavaScript“单击”伦敦按钮，打开页面加载选项卡

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

巴黎
巴黎是法国的首都。

东京
东京是日本的首都







伦敦
巴黎
东京
东京
东京是日本的首都

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

我在看你的代码。看起来问题在于两个选项卡使用相同的ID。ID应该是唯一的

您有两个问题

您有两个具有相同id的元素，因此代码只需选择 首先

您对所有选项卡使用相同的类，而内容对每个面板使用不同的类名称

你们每次点击按钮都会隐藏所有内容，你们应该使用单独的功能或者更好的动态功能

---

正如Megabyter所说，两个ID都必须是唯一的。但是，单击函数会隐藏所有“tabcontent”

div

s。因此，为两个唯一ID调用

.click（）

将只显示第二个选项卡的内容（因为第二个

.click（）

将隐藏第一个选项卡显示的内容）。我建议只将class

.active

添加到您希望在HTML页面加载时显示的两个选项卡内容中，然后在CSS中添加class

display:block

到

.active

。这还允许您在函数中只添加类

.active

，而不用担心更改Javascript中的显示样式

编辑

您还需要一些方法让您的函数区分两个选项卡式部分，并且只更改单击的部分。这是一个有效的例子

我添加了两个带有

num

属性的容器

s，以便函数能够区分它们。此数字作为

openCity（）

函数中的第三个参数传入。函数在两个容器中循环，并且只编辑传递到函数中的数字等于容器的

num

属性的容器

通过调用

.getElementsByClassName（）

来检索正确容器的子选项卡内容和选项卡链接

然后，该函数循环子选项卡内容和选项卡链接（只有正确容器中的链接）并从中删除类

.active

最后，将第二个参数更改为数字（而不是id）。这两组选项卡链接的数量分别等于1、2和3。此编号用于在正确的容器中查找正确的子选项卡链接及其相应的选项卡内容，并向其添加类

.active

---

另外，您不必为

for

循环定义变量

i

for

循环为您完成这一切<代码>而循环要求预先定义变量，并在每次迭代后在循环中递增。

使用类名而不是ID表示cityes。将“显示”类名添加到活动内容：

函数openCity（evt，cityName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（var i=0；i
.tab{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#f1f1；
}
/*设置选项卡内按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
字号：17px；