我的 HTML 代码中的错误

Question

以下 HTML 代码有一个错误，例如，当我单击学生统计信息时，选项卡没有变化。

我认为问题不在于内部导航选项卡，而在于头部，但我不知道在哪里......

您能建议一个网站来检查错误吗？我已经尝试了几个，但它们给了我一些奇怪的错误，例如：未定义编码...

function show(id) {
  if (document.getElementById(id).style.display == 'none') {
    document.getElementById(id).style.display = 'block';
  }
  return false;
}

function hide(id) {
  if (document.getElementById(id).style.display == 'block') {
    document.getElementById(id).style.display = 'none';
  }
  return false;
}

.borderradius {
  border-radius: 11px;
}

.content {
  width: 800px;
  margin: 0 auto;
}

.my_text {
  font-family: "Raleway";
  font-size: 30px;
  font-weight: italic;
  font-color: #303030
}

.left {
  text-align: center;
}

.bottom {
  bottom: 0;
  background-color: #07B;
}

.body {
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 20px;
}

.nav-tabs.centered>li,
.nav-pills.centered>li {
  float: none;
  display: inline-block;
  *display: inline;
  /* ie7 fix */
  zoom: 1;
  /* hasLayout ie7 trigger */
}

.nav-tabs.centered,
.nav-pills.centered {
  text-align: center;
}

.c3-chart-arcs-title {
  fill: black;
  font-size: 13px;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 6px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 6px 1px;
  transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
}


/* Full height image header */

.bgimg-1 {
  background-position: center;
  background-size: cover;
  background-image: url("Images/views.jpg");
  min-height: 120%;
}

.button4 {
  background-color: white;
  color: black;
  border: 3px solid #e7e7e7;
}

.button4:hover {
  background-color: #e7e7e7;
}

.button4 {
  border-radius: 17px;
}

.button4:focus {
  background-color: #e7e7e7;
  outline: none;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="container" id="header">
  <!-- Put the background picture here -->
  <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
  <h1 class="w3-wide w3-center">ANALYSIS OF HIGH SCHOOLS' PERFORMANCE IN THE INITIAL PHASE OF THE GETI </h1>
  <div style="line-height:77%;"> <br> <br> </div>

  <ul class="nav nav-tabs centered">
    <li class="active"> <a href="#project" data-toggle="tab">About the project     </a> </li>
    <li> <a href="#students" data-toggle="tab">Students' statistics     </a> </li>
    <li> <a href="#hschool" data-toggle="tab">High schools' statistics     </a> </li>
    <li> <a href="#me" data-toggle="tab">Who am I     </a> </li>
  </ul>

  <div class="tab-content">

    <!-- Tab1: Project -->
    <div id="project" class="tab-pane fade in active w3-container w3-content w3-padding-32" style="max-width:1050px">
      <h3 class="w3-wide w3-center">ABOUT THE PROJECT </h3>
      <br>
      <p class="w3-container" style="margin: 0 05%">This webapp has been developed as part of my Bachelor's thesis to analyze the performance of the students in the initial phase of the GETI Degree (Industrial Technologies Engineering) and how their prior high school affects their results. </p>
    </div>

    <!-- Tab2: Students -->

    <div id="students" class="tab-pane fade w3-container w3-content w3-padding-16" style="max-width:1050px">
      <br>
      <CENTER> <button class="button button4" type="button" onclick="show('One');hide('Group');hide('Average');">Specific subject     </button>
        <button class="button button4" type="button" onclick="hide('One');show('Group');hide('Average');">Group of subjects     </button>
        <button class="button button4" type="button" onclick="hide('One');hide('Group');show('Average');">Average grade     </button>
        <CENTER>
          <div id="One" style="display: block;" class="w3-wide w3-center">Statistics about a specific subject </div>
        </CENTER>
        <CENTER>
          <div id="Group" style="display: none;" class="w3-wide w3-center">Statistics about a group of subjects </div>
        </CENTER>
        <CENTER>
          <div id="Average" style="display: none;" class="w3-wide w3-center">Average grade </div>
        </CENTER>
    </div>

    <!-- Tab3: Hschool -->
    <div id="hschool" class="tab-pane fade w3-container w3-content w3-padding-32" style="max-width:1050px">
      <h3 class="w3-wide w3-center">HIGH SCHOOLS' STATISTICS </h3>
    </div>

    <!-- Tab4: Me -->
    <div id="me" class="tab-pane fade w3-container w3-content w3-padding-32" style="max-width:1050px">
      <h3 class="w3-wide w3-center">WHO AM I? </h3>
      <p class="w3-container" style="margin: 0 05%">I am an Industrial Technologies Engineering Student from ETSEIB University. I have developed this web-app as part of my Bachelor Thesis in Data Mining. </p>
      <h3 class="w3-center">Contact information </h3>

      <div class="w3-row-padding w3-center">

        <br>
      </div>
    </div>

  </div>

  <!-- Footer -->
  <footer class="w3-center w3-grey w3-padding-32">
    <p> &copy <a href="https://etseib.upc.edu/ca" target="_blank"> ETSEIB      
     </a> reserves the rights of all the displayed data | M </p>
    <div class="w3-left-align w3-margin-left w3-small">
      <p>
        <br> &nbsp;&nbsp;&nbsp;Escola Tècnica Superior d'Enginyeria Industrial de Barcelona <br> &nbsp;&nbsp;&nbsp;Universitat Politècnica de Catalunya <br> &nbsp;&nbsp;&nbsp;Avda. Diagonal 647, 08028 Barcelona <br> &nbsp;&nbsp;&nbsp;Phone: +34 93 401
        66 15
      </p>
    </div>
  </footer>

Answer 1

你应该在body标签的结束标签之前添加这段代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

    </script>
      <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
    </html>

Answer 2

在此验证器中运行您的代码： https://validator.w3.org/

如果您只想粘贴代码，请选择“通过直接输入验证”。 尽可能纠正任何错误。用可能留下的错误更新 sn-p。