웹 페이지에 Divs가 표시되지 않습니다.

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 속성을 제거하고 클로저 내부에 이벤트 리스너를 추가합니다.