JavaScript选项卡：onclick不执行函数

我的网站上有一个标签系统，它应该显示两个不同标签的内容，但当我点击它时，它不起作用。我想我的

document.getElementById（“教程”）.onclick=function（）

和

document.getElementById（“编辑器”）.onclick=function（）

有问题，但我现在似乎看不出有什么问题

这是我的密码：

函数openTab（evt，tabName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i
正文{
填充：0！重要；
}
/*设置选项卡的样式*/
分区选项卡{
溢出：隐藏；
背景色：#f1f1；
宽度：100%；
}
/*设置选项卡内按钮的样式*/
div.tab按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.1s；
}
/*更改悬停按钮的背景色*/
div.tab按钮：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
div.tab按钮.active{
背景色：#ccc；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
-webkit动画：fadeEffect 0.1s；
动画：fadeEffect 0.1s；
}
@-webkit关键帧fadeEffect{
从{opacity:0；}
到{opacity:1；}
}
@关键帧淡出效果{
从{opacity:0；}
到{opacity:1；}
}

{{page.title}}
辅导的
编辑
{{content}}
编辑
解决方案：

document.getElementById("tutorialBtn").onclick = function(event) {
    openTab(event, 'tutorial');
}

document.getElementById("editorBtn").onclick = function(event) {
    openTab(event, 'editor');
}


<div class="tab">
    <button class="tablinks" id="tutorialBtn">Tutorial</button>
    <button class="tablinks" id="editorBtn">Editor</button>
</div>

document.getElementById（“tutorialBtn”）.onclick=函数（事件）{
openTab（事件“教程”）；
}
document.getElementById（“editorBtn”）.onclick=函数（事件）{
openTab（事件“编辑器”）；
}
辅导的
编辑

单击时忘记将
事件
传递给函数。通过事件应该可以解决问题。
解决方案：

document.getElementById("tutorialBtn").onclick = function(event) {
    openTab(event, 'tutorial');
}

document.getElementById("editorBtn").onclick = function(event) {
    openTab(event, 'editor');
}


<div class="tab">
    <button class="tablinks" id="tutorialBtn">Tutorial</button>
    <button class="tablinks" id="editorBtn">Editor</button>
</div>

document.getElementById（“tutorialBtn”）.onclick=函数（事件）{
openTab（事件“教程”）；
}
document.getElementById（“editorBtn”）.onclick=函数（事件）{
openTab（事件“编辑器”）；
}
辅导的
编辑

单击时忘记将
事件
传递给函数。传递事件应该可以解决这个问题。
您可以在
div
s上使用内容而不是选项卡设置单击处理程序。我修改了您的代码，将ID添加到选项卡本身，并在那里设置了单击处理程序

（注意，我还更改了
defaultOpen
ID，因为每个元素只能有一个ID，我添加了ID
tutorialTab
）

正如其他人指出的那样，我也经历了
事件


函数openTab（evt，tabName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i
正文{
填充：0！重要；
}
/*设置选项卡的样式*/
分区选项卡{
溢出：隐藏；
背景色：#f1f1；
宽度：100%；
}
/*设置选项卡内按钮的样式*/
div.tab按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.1s；
}
/*更改悬停按钮的背景色*/
div.tab按钮：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
div.tab按钮.active{
背景色：#ccc；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
-webkit动画：fadeEffect 0.1s；
动画：fadeEffect 0.1s；
}
@-webkit关键帧fadeEffect{
从{opacity:0；}
到{opacity:1；}
}
@关键帧淡出效果{
从{opacity:0；}
到{opacity:1；}
}

{{page.title}}
辅导的
编辑
{{content}}
编辑
您可以在
div
s上使用内容而不是选项卡设置单击处理程序。我修改了您的代码，将ID添加到选项卡本身，并在那里设置了单击处理程序

（注意，我还更改了
defaultOpen
ID，因为每个元素只能有一个ID，我添加了ID
tutorialTab
）

正如其他人指出的那样，我也经历了
事件


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