默认选项卡不使用JavaScript

我对web开发有点陌生，我试图创建一些类似于在：

我做到了，但是我遇到的问题是默认的open似乎不起作用。它打开了所有三个选项卡内容，而不是默认的选项卡内容

我不确定我做错了什么。点击按钮后，按钮确实可以工作，但当它最初加载时，似乎无法按预期工作

以下是jsbing的代码：

函数startTab（）{
document.getElementById（“defaultOpen”）。单击（）；
}
函数openCity（evt、cityName）{
var i、tabfrontpagecontent、tablinks；
选项卡FrontPage内容=
document.getElementsByClassName（“tabfrontpagecontent”）；
对于（i=0；i

.tabfrontpage{
左：30%；
右：30%；
宽度：40%；
顶部：3px；
填充物：3px 5px；
位置：相对位置；
溢出：隐藏；
边框：3px实心#ccc；
背景色：#f1f1；
边框左上半径：20px；
边框右上角半径：20px；
}
.tabfrontpage{
显示：内联块；
浮动：相对；
列表样式：无；
保证金：0；
填充：0；
溢出：可见；
位置：相对位置；
左：50%；
文本对齐：居中；
}
.Tabul li{
位置：相对位置；
溢出：自动；
右：50%；
背景色：继承；
文本对齐：居中；
显示：内联；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.7s；
字号：17px；
}
.tabfrontpage li:悬停{
背景色：#ddd；
过渡：0.7s；
}
.tabfrontpage li.active{
背景色：#ccc；
}
.tabfrontpagecontent{
z指数：10；
背景色：#FFFFFF；
位置：相对位置；
浮动：左；
文本对齐：居中；
左：15%；
右：15%；
宽度：70%；
显示：内联块；
填充：6px 12px；
边框：3px实心#ccc；
}

Test1
Test2
Test3



测试1测试
测试1测试测试

测试1测试测试

测试1测试测试

测试1测试测试

测试1测试测试

测试1测试测试



Test2Test
测试2测试测试

测试2测试测试

测试2测试测试

测试2测试测试

测试2测试测试

测试2测试测试

测试2测试测试



测试3
测试3测试测试

测试3测试测试

测试3测试测试

测试3测试测试

测试3测试测试

测试3测试测试

测试3测试测试

使用jquery，您可以执行以下操作：

$（文档）.ready（函数（）{
$（'.toggle'）。打开（'click'，function（）{
if（$（this）.next（'.content'）.hasClass（'active'））{
$（this.text（'Show'）；
$（this）.next（'.content'）.removeClass（'active'）；
}否则{
$（'.toggle'）.text（'Show'）；
$（this.text（'Hide'）；
$（'.content'）.removeClass（'active'）；
$（this）.next（'.content'）.addClass（'active'）；
}
});
});
.content{
显示：无；
}
.主动{
显示：块；
}

1.
显示
大约1

2.
隐藏
大约2

3.
显示
大约3
您应该将id
defaultOpen
放在您希望默认打开的选项卡上
否则，
document.getElementById
将无法找到它

Test1

您还应该在JavaScript中调用您创建的函数
startTab（）

除此之外，您的代码正在运行，下面是您更新的示例
您需要将您不想看到的元素的CSS
display
属性设置为
none
：


函数startTab（）{
document.getElementById（“defaultOpen”）。单击（）；
}
函数openCity（evt、cityName）{
var i、tabfrontpagecontent、tablinks；
选项卡FrontPage内容=
document.getElementsByClassName（“tabfrontpagecontent”）；
对于（i=0；i

.tabfrontpage{
左：30%；
右：30%；
宽度：40%；
顶部：3px；
填充物：3px 5px；
位置：相对位置；
溢出：隐藏；
边框：3px实心#ccc；
背景色：#f1f1；
边框左上半径：20px；
边框右上角半径：20px；
}
.tabfrontpage{
显示：内联块；
浮动：相对；
列表样式：无；
保证金：0；
填充：0；
溢出：可见；
位置：相对位置；
左：50%；
文本a