Div不会出现在网页上

Question

我不知道发生了什么。在我的网站的正文中，我有一个带有标签的系统，可以在两个div之间切换以显示内容。从一个小时前开始，div就无法显示其内容，即使源代码中存在所有内容。我必须改变一些东西，但我不知道在哪里。有人可以帮我找出可能的错误吗？

要明确：它涉及<div id="algemeen" class="tabcontent">和<div id="science" class="tabcontent"> div中的内容。

我在下面提供了相关的HTML，JS和CSS代码。 可以在此处找到包含完整代码的JSfiddle：https://jsfiddle.net/rpvrmLcr/

      <div id="content-wrapper">
          <div class="mui--appbar-height"></div>
          <div class="mui-container-fluid">

              <ul class="tab">
                  <li><a href="#" class="tablinks" onclick="openEditorTab(event, 'algemeen')">Algemeen</a></li>      
                  <li><a href="#" class="tablinks" onclick="openEditorTab(event, 'science')">Science</a></li>      
              </ul>

              <div id="algemeen" class="tabcontent">
                  <div class="table">

                  <div class="table-row">
                      <div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=1', '_blank');">presenteren</div>
                      <div class="niveaubutton">1</div>
                      <div class="editbutton">Bewerken</div>
                      <div class="rubriccodebutton">&#128437;</div>
                  </div>
                  <div class="table-row">
                      <div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=2', '_blank');">samenwerken</div>
                      <div class="niveaubutton">1</div>
                      <div class="editbutton">Bewerken</div>
                      <div class="rubriccodebutton">&#128437;</div>
                  </div>
                  <div class="table-row">
                      <div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=6', '_blank');">Metarubric</div>
                      <div class="niveaubutton">4 vmbo</div>
                      <div class="editbutton">Bewerken</div>
                      <div class="rubriccodebutton">&#128437;</div>
                  </div>
                  <div class="table-row">
                      <div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=8', '_blank');">Naama</div>
                      <div class="niveaubutton">1 vmbo</div>
                      <div class="editbutton">Bewerken</div>
                      <div class="rubriccodebutton">&#128437;</div>
                  </div>
                  <div class="table-row">
                      <div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=9', '_blank');">Naam</div>
                      <div class="niveaubutton">1 vmbo</div>
                      <div class="editbutton">Bewerken</div>
                      <div class="rubriccodebutton">&#128437;</div>
                  </div>
                  <div class="table-row">
                      <div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=10', '_blank');">Naam</div>
                      <div class="niveaubutton">1 vmbo</div>
                      <div class="editbutton">Bewerken</div>
                      <div class="rubriccodebutton">&#128437;</div>
                  </div>
                  <div class="table-row">
                      <div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=11', '_blank');">Naamasdf</div>
                      <div class="niveaubutton">4 vmbo</div>
                      <div class="editbutton">Bewerken</div>
                      <div class="rubriccodebutton">&#128437;</div>
                  </div>
                  <div class="table-row">
                      <div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=12', '_blank');">Naamhtr</div>
                      <div class="niveaubutton">1 vmbo</div>
                      <div class="editbutton">Bewerken</div>
                      <div class="rubriccodebutton">&#128437;</div>
                  </div>
                  <div class="table-row">
                      <div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=13', '_blank');">Naam123</div>
                      <div class="niveaubutton">1 vmbo</div>
                      <div class="editbutton">Bewerken</div>
                      <div class="rubriccodebutton">&#128437;</div>
                  </div>
                </div>
              </div>
              <div id="science" class="tabcontent">
                  <div class="table">

                  <div class="table-row">
                      <div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=3', '_blank');">onderzoeken</div>
                      <div class="niveaubutton">1</div>
                      <div class="editbutton">Bewerken</div>
                      <div class="rubriccodebutton">&#128437;</div>
                  </div>
                  <div class="table-row">
                      <div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=4', '_blank');">onderzoekverslag</div>
                      <div class="niveaubutton">1</div>
                      <div class="editbutton">Bewerken</div>
                      <div class="rubriccodebutton">&#128437;</div>
                  </div>
                  <div class="table-row">
                      <div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=5', '_blank');">Testrun</div>
                      <div class="niveaubutton">3 vmbo</div>
                      <div class="editbutton">Bewerken</div>
                      <div class="rubriccodebutton">&#128437;</div>
                  </div>
                  <div class="table-row">
                      <div class="rubricbutton" onclick="window.open('http://rubric.school/rubric.php?index=7', '_blank');">Kadeng</div>
                      <div class="niveaubutton">2 vmbo</div>
                      <div class="editbutton">Bewerken</div>
                      <div class="rubriccodebutton">&#128437;</div>
                  </div>
                </div>
              </div>

          </div>
      </div>

CSS代码：

#content-wrapper {
    min-height: 100%;
    min-width: 900px;
    overflow-x: hidden;
    margin-left: 0px;
    transition: margin-left 0.2s;

  /* sticky bottom */
  margin-bottom: -60px;
  padding-bottom: 160px;
}


@media (min-width: 768px) {
  #header {
    left: 200px;
  }

  #sidedrawer {
    transform: translate(200px);
  }

  #content-wrapper {
    margin-left: 200px;
  }

  #footer {
    margin-left: 200px;
  }



  body.hide-sidedrawer #content-wrapper {
    margin-left: 0;
  }


}



.mui-appbar {
    background-color:#DFD;
    color:#FFF;
    position: relative;
    z-index: 1;
}


/* Style the tab content */
.tabcontent {
    display: none;
    padding: 20px 12px;
    border: none;
}
.rubricbutton {
    display: table-cell;
    width: 400px;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
    background: #FFF;
    height: 50px;
    float: left;
    padding: 5px;
    margin: 3px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.rubriccodebutton {
    display: table-cell;
    width: 50px;
    font-size: 30px;
    background: #FFF;
    height: 50px;
    float: left;
    padding: 5px;
    margin: 3px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.niveaubutton {
    display: table-cell;
    width: 100px;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
    background: #FFF;
    height: 50px;
    float: left;
    padding: 5px;
    margin: 3px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.editbutton {
    display: table-cell;
    width: 150px;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
    background: #FFF;
    height: 50px;
    float: left;
    padding: 5px;
    margin: 3px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.listcontainer {
    width: 100%;
    margin-top: 20px;
    border: 1px solid #000;
}

.separator {
    width: 100%;
    height: 1px;
    float: none;
}

.table {
    display: table;
}

.table-row {
    display: table-row;
    margin-top: 20px;
    height: 80px;
}

JS代码：

function openEditorTab(evt, subjectName) {
            // Declare all variables
            var i, tabcontent, tablinks;

            // Get all elements with class="tabcontent" and hide them
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }

            // Get all elements with class="tablinks" and remove the class "active"
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }

            // Show the current tab, and add an "active" class to the link that opened the tab
            document.getElementById(subjectName).style.display = "block";
            evt.currentTarget.className += " active";
        }

Answer 1

嗯。脚本代码有一些错误。关闭

  

jQuery的（函数（$）{

没有关闭。

我尝试在顶部关闭它并且它有效。 试试这段代码。

jQuery(function ($) {
    var $bodyEl = $('body'),
        $sidedrawerEl = $('#sidedrawer');
});

如果要保留“onclick”属性，请保留在全局范围内定义的其他函数。 否则，如果要保持闭包内定义的函数，则从按钮中删除onclick属性，并在闭包内添加事件侦听器。