<!DOCTYPE html>
<head>
<title>Anime World</title>
<style type="text/css">
body {font-family: Arial, sans-serif;}
<!--Tab CSS design-->
div.tab {
overflow: hidden;
border: 1px solid;
background-color: #f1f1f1;
}
div.tab.button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 15px 17px;
transition: 0.3s;
font-size: 17px;
}
div.tab.button:hover {
background-color: #ddd;
}
div.tab.button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 12px 23px;
border: 1px solid #ccc;
border-top: none;
}
这是我为 TAB 设计的 CSS，我从 w3schools 的例子中做了一点改动。
<body style="background-color:darkgray">
<div class="tab" action="tabcontent">
<button class="tablinks" onclick="openPage(event, 'Home')">Home</button>
<button class="tablinks" onclick="openPage(event, 'List')">List</button>
<button class="tablinks" onclick="openPage(event, 'Videos')">Videos</button>
<button class="tablinks" onclick="openPage(event, 'Manga')">Manga</button>
<button class="tablinks" onclick="openPage(event, 'About')">About</button>
</div>
<script type="text/javascript">
function openPage(evt, pageName) {
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(pageName).style.display = " block";
evt.currentTarget.className += " active";
}
</script>
<div id="List" class="tabcontent">
<h1>LIST OF ANIMES</h1>
<br/>
<table>
<tr>
<th>Anime</th>
<th>Rating</th>
<th>Owner</th>
</tr>
这是 Javascript 中的 TAB 代码，我根据 w3schools 的教程完成了它，我只是更改了一些我注意到它们应该的代码。
所以这里的问题是，这是行不通的。上面的 CSS 设计不想显示，它显示简单的 HTML 按钮，没有任何设计，与 Javascript 代码相同，当我单击“列表”按钮时，它不会显示 <table>。我在 <div id="List" class="tabcontent"> .请记住，我是这方面的初学者，所以我正在通过教程做所有事情并慢慢学习。感谢您的帮助。
最佳答案
您有几个不相关的错误:
tabcontent[i]style.display = "none";应该是 tabcontent[i].style.display = "none";
您不使用 <!-- -->对于 CSS 中的注释，您可以使用 /* */
您的 CSS 应该是 div.tab button , 不是 div.tab.button因为button是标签名，不是类名。同样，div.tab button.active和 div.tab button:hover而不是 div.tab.button.active和 div.tab.button:hover .
关于javascript - 我在 HTML 中的 TABS 不起作用。它不会将我重定向到 <div id ="example">，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44891221/