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/

选择＆＃34;通过直接输入验证＆＃34;如果您只想粘贴代码。纠正你能做的任何错误。更新可能遗留的错误代码段。

我的HTML代码出错

2 个答案: