0
私は自分のウェブサイトに2つの異なるタブの内容を表示するタブシステムを持っていますが、それをクリックしても機能しません。私はdocument.getElementById("tutorial").onclick = function()とdocument.getElementById("editor").onclick = function()に何か間違っていると思いますが、私は現時点で何が見えないのでしょうか。JavaScriptタブ：onclick関数が実行されていません
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を渡すのを忘れ：
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>
使用 'document.ready'関数でjavascript'コード。 –
あなたのタブにないコンテンツコンテナにonclickイベントを入れます。また、クリックハンドラには、 'function（event）{' –
@AsifSharifShahidが定義されているイベント引数がありません。コードが動作するような答えを投稿してください。 – Anonymowse