Question

我的网站上有一个标签系统，应该显示两个不同标签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>

请帮忙

Answer 1

您可以使用内容而不是标签在div上设置点击处理程序。我修改了您的代码，以便为标签本身添加ID，并在那里设置点击处理程序。

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

我也按照其他人的指示通过了event。

＆＃13;

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();

＆＃13;

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;}
}

＆＃13;

<!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>

＆＃13;

Answer 2

解决方案：

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传递给该功能。传递事件应解决问题。

JavaScript选项卡：onclick不执行功能

2 个答案: