JavaScript標簽：onclick未執行功能
[英]JavaScript Tabs: onclick not executing function
問題描述
我的網站上有一個標簽系統，該系統應該顯示兩個不同的標簽onclick的內容，但是當我單擊它時，它不起作用。 我認為我的document.getElementById("tutorial").onclick = function()和document.getElementById("editor").onclick = function()出了點問題，但目前似乎看不到什么。
這是我的代碼：
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>
請幫忙
2 個解決方案
解決方案1
2 已采納 2017-06-18 19:26:57
您可以在div使用內容（而不是標簽）來設置點擊處理程序。 我已經修改了您的代碼，以將ID添加到標簽本身，並在其中設置點擊處理程序。
（請注意，我還更改了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> <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
解：
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傳遞給單擊功能。 通過事件可以解決該問題。
googleweblight 不執行 OnClick JavaScript 函數
[英]googleweblight not executing OnClick JavaScript Function
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.