JavaScript标签：onclick未执行功能
[英]JavaScript Tabs: onclick not executing function
问题描述
I have a tab system on my website that should show the content of two different tabs onclick , but when I click it it doesn't work. 
我的网站上有一个标签系统，该系统应该显示两个不同的标签onclick的内容，但是当我单击它时，它不起作用。 I think there is something wrong with my document.getElementById("tutorial").onclick = function() and document.getElementById("editor").onclick = function() but I can't seem to see what at the moment. 我认为我的document.getElementById("tutorial").onclick = function()和document.getElementById("editor").onclick = function()出了点问题，但目前似乎看不到什么。
Here is my code: 这是我的代码：
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> <head> <title>{{ page.title }}</title> <link rel="stylesheet" type="text/css" href="/assets/css/main.css"> </head> <body> <div class="tab"> <button class="tablinks" id="defaultOpen">Tutorial</button> <button class="tablinks">Editor</button> </div> <div id="tutorial" class="tabcontent"> {{ content }} </div> <div id="editor" class="tabcontent"> Editor </div> <script src="/assets/js/main.js"></script> </body> </html>
Please help 请帮忙
2 个解决方案
解决方案1
2 已采纳 2017-06-18 19:26:57
You set your click handlers on the div s with the content, not the tabs. 您可以在div使用内容（而不是标签）来设置点击处理程序。 I've modified your code to add IDs to the tabs themselves and set up click handlers there instead. 我已经修改了您的代码，以将ID添加到标签本身，并在其中设置点击处理程序。
(Note that I also changed the defaultOpen ID, since elements can only have one ID each, and I added the ID tutorialTab .) （请注意，我还更改了defaultOpen ID，因为每个元素只能有一个ID，并且添加了ID tutorialTab 。）
I also passed through event as pointed out by others. 我还经历了其他人指出的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> <head> <title>{{ page.title }}</title> <link rel="stylesheet" type="text/css" href="/assets/css/main.css"> </head> <body> <div class="tab"> <button class="tablinks defaultOpen" id="tutorialTab">Tutorial</button> <button class="tablinks" id="editorTab">Editor</button> </div> <div id="tutorial" class="tabcontent"> {{ content }} </div> <div id="editor" class="tabcontent"> Editor </div> <script src="/assets/js/main.js"></script> </body> </html>
解决方案2
0 2017-06-18 19:26:54
Solution: 解：
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>
You forgot to pass event to the function on click. 您忘记将event传递给单击功能。 Passing event should fix the issue. 通过事件可以解决该问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.