JavaScript标签：onclick没有执行功能

我的网站上有一个标签系统，应该显示两个不同标签onclick的内容，但是当我点击它时不起作用。我认为我的document.getElementById("tutorial").onclick = function()和document.getElementById("editor").onclick = function()有问题，但目前我看不清楚。JavaScript标签：onclick没有执行功能

这里是我的代码：

function openTab(evt, tabName) { 
 
    var i, tabcontent, tablinks; 
 
    tabcontent = document.getElementsByClassName("tabcontent"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
     tabcontent[i].style.display = "none"; 
 
    } 
 
    tablinks = document.getElementsByClassName("tablinks"); 
 
    for (i = 0; i < tablinks.length; i++) { 
 
     tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
    } 
 
    document.getElementById(tabName).style.display = "block"; 
 
    evt.currentTarget.className += " active"; 
 
} 
 

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

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

 
document.getElementById("defaultOpen").click();

body { 
 
    padding: 0 !important; 
 
} 
 

 
/* Style the tab */ 
 
div.tab { 
 
    overflow: hidden; 
 
    background-color: #f1f1f1; 
 
    width: 100%; 
 
} 
 

 
/* Style the buttons inside the tab */ 
 
div.tab button { 
 
    background-color: inherit; 
 
    float: left; 
 
    border: none; 
 
    outline: none; 
 
    cursor: pointer; 
 
    padding: 14px 16px; 
 
    transition: 0.1s; 
 
} 
 

 
/* Change background color of buttons on hover */ 
 
div.tab button:hover { 
 
    background-color: #ddd; 
 
} 
 

 
/* Create an active/current tablink class */ 
 
div.tab button.active { 
 
    background-color: #ccc; 
 
} 
 

 
/* Style the tab content */ 
 
.tabcontent { 
 
    display: none; 
 
    padding: 6px 12px; 
 
    -webkit-animation: fadeEffect 0.1s; 
 
    animation: fadeEffect 0.1s; 
 
} 
 

 
@-webkit-keyframes fadeEffect { 
 
    from {opacity: 0;} 
 
    to {opacity: 1;} 
 
} 
 

 
@keyframes fadeEffect { 
 
    from {opacity: 0;} 
 
    to {opacity: 1;} 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>{{ page.title }}</title> 
 
\t \t <link rel="stylesheet" type="text/css" href="/assets/css/main.css"> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="tab"> 
 
\t \t <button class="tablinks" id="defaultOpen">Tutorial</button> 
 
\t \t <button class="tablinks">Editor</button> 
 
\t \t </div> 
 

 
\t \t <div id="tutorial" class="tabcontent"> 
 
\t \t {{ content }} 
 
\t \t </div> 
 

 
\t \t <div id="editor" class="tabcontent"> 
 
\t \t Editor 
 
\t \t </div> 
 
\t \t 
 
\t \t <script src="/assets/js/main.js"></script> 
 
\t </body> 
 
</html>

请帮

来源

2017-06-18 Anonymowse

使用'javascript'代码。 –

您将内容容器上的onclick事件放置在您的选项卡上。此外，您的点击处理程序没有定义的事件参数应该是'function（event）{' –

@AsifSharifShahid，这似乎不适合我。请发布一个答案，哪些代码适用请。 – Anonymowse

您使用内容而不是标签在div上设置您的点击处理程序。我修改了代码，将标识添加到选项卡本身，并设置了点击处理程序。

（注意，我也改变了defaultOpen ID，因为元素只能各有一个ID，我们添加了ID tutorialTab。）

我还通过event通过如其他人指出。

function openTab(evt, tabName) { 
 
    var i, tabcontent, tablinks; 
 
    tabcontent = document.getElementsByClassName("tabcontent"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
     tabcontent[i].style.display = "none"; 
 
    } 
 
    tablinks = document.getElementsByClassName("tablinks"); 
 
    for (i = 0; i < tablinks.length; i++) { 
 
     tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
    } 
 
    document.getElementById(tabName).style.display = "block"; 
 
    evt.currentTarget.className += " active"; 
 
} 
 

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

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

 
document.getElementById("tutorialTab").click();

body { 
 
    padding: 0 !important; 
 
} 
 

 
/* Style the tab */ 
 
div.tab { 
 
    overflow: hidden; 
 
    background-color: #f1f1f1; 
 
    width: 100%; 
 
} 
 

 
/* Style the buttons inside the tab */ 
 
div.tab button { 
 
    background-color: inherit; 
 
    float: left; 
 
    border: none; 
 
    outline: none; 
 
    cursor: pointer; 
 
    padding: 14px 16px; 
 
    transition: 0.1s; 
 
} 
 

 
/* Change background color of buttons on hover */ 
 
div.tab button:hover { 
 
    background-color: #ddd; 
 
} 
 

 
/* Create an active/current tablink class */ 
 
div.tab button.active { 
 
    background-color: #ccc; 
 
} 
 

 
/* Style the tab content */ 
 
.tabcontent { 
 
    display: none; 
 
    padding: 6px 12px; 
 
    -webkit-animation: fadeEffect 0.1s; 
 
    animation: fadeEffect 0.1s; 
 
} 
 

 
@-webkit-keyframes fadeEffect { 
 
    from {opacity: 0;} 
 
    to {opacity: 1;} 
 
} 
 

 
@keyframes fadeEffect { 
 
    from {opacity: 0;} 
 
    to {opacity: 1;} 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>{{ page.title }}</title> 
 
\t \t <link rel="stylesheet" type="text/css" href="/assets/css/main.css"> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="tab"> 
 
\t \t <button class="tablinks defaultOpen" id="tutorialTab">Tutorial</button> 
 
\t \t <button class="tablinks" id="editorTab">Editor</button> 
 
\t \t </div> 
 

 
\t \t <div id="tutorial" class="tabcontent"> 
 
\t \t {{ content }} 
 
\t \t </div> 
 

 
\t \t <div id="editor" class="tabcontent"> 
 
\t \t Editor 
 
\t \t </div> 
 
\t \t 
 
\t \t <script src="/assets/js/main.js"></script> 
 
\t </body> 
 
</html>

在`document.ready`功能

来源

2017-06-18 19:26:57 smarx

解决方案：

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>

你忘了传递event上点击功能。通过事件应该解决问题。

来源

2017-06-18 19:26:54 gauravmuk

虽然没有事件参数是一个问题，但主要问题是OP有'tutorial'和'editor' id作为内容div而不是标签 –

您在第二个处理程序设置中编辑了错误的字符串...应该是'... getElementById（“editorBtn”）''和openTab（...，'editor'）'。 – smarx

感谢您纠正错误的拼写错误 – gauravmuk

JavaScript标签：onclick没有执行功能

回答

相关问题