<script>を移動すると結果が変わります。なぜですか？

Question

これはコードである：上記のコードで

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<div style="text-align: justify">[Introduction text]</div> <br> <br> 
<ul class="nav nav-tabs"> 
    <li class="active"> 
     <a data-toggle="tab" href="#Vspoiler" id="defaultOpen" onclick="openPage('Vspoiler')">Vulgate version</a> 
    </li> 
    <li> 
     <a data-toggle="tab" href="#Cspoiler" onclick="openPage('Cspoiler')">Campbell version</a> 
    </li> 
</ul> 
<div id="Vspoiler" class="tab-pane tabcontent active"><br> 
    <table> 
     <tbody> 
      <tr> 
       <td> 
        <div class="column" style="padding-left: 80px"> [Contents of col 1 of tab 1] </div> 
       </td> 
       <td> 
        <div class="column" style="padding-left: 80px"> [Contents of col 2 of tab 2] </div> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
<div id="Cspoiler" class="tab-pane tabcontent"><br> 
    <table> 
     <tbody> 
      <tr> 
       <td> 
        <div class="column" style="padding-left: 80px"> [Contents of col 1 of tab 2] </div> 
       </td> 
       <td> 
        <div class="column" style="padding-left: 80px"> [Contents of col 2 of tab 2] </div> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
<script> 

    function openPage(pageName) { 
     var i, tabcontent; 
     tabcontent = document.getElementsByClassName("tabcontent"); 
     for (i = 0; i < tabcontent.length; i++) { 
      tabcontent[i].style.display = "none"; 
     } 

     document.getElementById(pageName).style.display = "block"; 
    } 

    document.getElementById("defaultOpen").click(); 

</script> 

、端部の要素があります。それがそこに残されていれば、出力は望ましい通りです。一番上に移動すると出力が変化し、tabcontentsのペインの内容（またはそれを呼び出すのに最適な用語）がロード時に表示され、非アクティブなタブがクリックされたときのみ、他の内容が実行されますこの場合は1であるが、合計が2以上ある場合は他のもの）が消える。なぜそれが起こるのですか？

注：これはこれに続くフォローアップであり、コードはほとんどが@Bradleyに回答しています。

Answer 1

documentより前に実行されたscriptがreadyであることが原因です。 （同期）。 scriptをbodyの先頭または頭に入れたい場合は、window.onload機能を使用してください。 DOMの準備が完了した後、これらのスクリプトは を解雇されるため

window.onload = function() 
{ 
// your code goes here 
} 

私の提案は、また、本文の最後に bootstrapとjquery LIBSをscriptを置くことになります。