Divsがウェブページに表示されない

何が起こったのかわかりません。私のウェブサイトの本体には、コンテンツを表示する2つのdivの間を切り替えるタブが付いたシステムがあります。 1時間前から、divはソースコード内にすべて存在していても、内容を表示することができません。私は何かを変えたにちがいありませんが、私はどこに考えがありません。誰かがエラーの可能性を探すのを助けることができますか？Divsがウェブページに表示されない

明らかにする：<div id="algemeen" class="tabcontent">と<div id="science" class="tabcontent"> divのコンテンツについてです。

以下に関連するHTML、JS、およびCSSコードを記載しました。 A完全なコードと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"; 
     }

出典

2016-09-07 enzolima

見る必要があるコードの量を減らすことはできますか？ –

[最小限の完全で検証可能な回答]（http://stackoverflow.com/help/mcve）を提供してください。 –

完了！一度にバッチ全体を投棄して申し訳ありません。 – enzolima

うーん。スクリプトコードにはいくつかのエラーがありました。閉鎖

jQueryの（関数（$）{

は閉じられていませんでした。

を私がトップでそれをクローズしようと、それが動作します。は、このコードを試してみてください。

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

"onclick"属性を保持したい場合は、グローバルスコープで定義されている他の機能を維持してください。それ以外の場合は、クロージャ内で定義された関数は、ボタンからonclick属性を削除し、クロージャ内にイベントリスナーを追加します。

出典

2016-09-07 17:42:14 Karan

それはそれでした！どうもありがとうございます。コピー時にエラーが発生している必要があります。 – enzolima

Divsがウェブページに表示されない

答えて

関連する問題