Das Verschieben eines <script> ändert das Ergebnis: Warum?

Question

Dies ist der Code:

<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> 

In dem obigen Code gibt es ein Element am Ende. Wenn es dort bleibt, ist die Ausgabe wie gewünscht. Wenn sie nach oben verschoben wird, ändert sich die Ausgabe dahingehend, dass der Inhalt aller tabcontents Fenster (oder wie auch immer der beste Begriff dafür lautet) beim Laden angezeigt wird, und nur wenn auf eine inaktive Registerkarte geklickt wird, den Inhalt der anderen (in diesem Fall 1 aber alle anderen wenn es mehr als 2 gibt) verschwinden. Warum passiert das?

Hinweis: Dies ist ein Follow-up zu diesem, und der Code ist vor allem von @Bradley, die dort geantwortet.

Answer 1

Das passiert, weil die script vor document läuft ready ist. (synchronisieren). Wenn Sie Ihre script am Anfang der body oder im Kopf behalten möchten, verwenden Sie die window.onload Funktion.

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

Mein Vorschlag wird die script am Ende des Körpers, auch die bootstrap und jquery Libs zu platzieren, da diese Skripte gefeuert wird, nachdem der DOM bereit ist.