Html 移动会改变结果：为什么？

代码如下：

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

在上面的代码中，末尾有一个元素。如果将其留在那里，则输出符合要求。如果移到顶部，输出会发生变化，因为加载时会显示所有选项卡内容窗格的内容或调用它们的最佳术语，并且只有在单击非活动选项卡时，才会显示其他选项卡的内容（在本例中为1），但如果总数超过2，则会显示任何其他选项卡的内容。为什么会这样

---

注意：这是本文的后续内容，代码主要由@Bradley编写，他在那里回答了问题。

之所以会出现这种情况，是因为脚本在文档准备就绪之前运行。同步。 如果要将脚本保留在正文开头或头部，请使用de window.onload函数

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

我的建议是将脚本也放在正文的末尾 引导程序和jquery库，因为这些脚本将被激发 在DOM准备好之后

---

你能更好地组织代码吗？最后的元素你是指脚本标签吗？@Daniel Oh该死。我复制粘贴，我的手机认为摆脱换行符和缩进是明智的。我今天已经用手机看了太多HTML了，我的手肘都痛了，所以我明天才会这么做。但是请随意告诉我：。@Sébastien我写了元素，但是脚本、部分被视为HTML和gobbled up.JS脚本元素内容是同步内联执行的，除非另有配置。在document ready之前计算的任何JS表达式都只能引用已经完全解析的元素，例如在前面加载的HTML标记中打开和关闭的元素。将脚本位置移动到顶部会使document.getElementByIddefaultOpen在元素可操作之前执行。脚本位于底部时不会发生此错误，因为元素已创建。