移动<脚本>改变结果：为什么？ [英] Moving a <script> changes the result: why?

问题描述

这是代码：

 < link rel =stylesheethref =https：//maxcdn.bootstrapcdn的.com /引导/ 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> [介绍文字]< / div> <峰; br> <峰; br> 
< ul class =nav nav-tabs> 
< li class =active> 
< a data-toggle =tabhref =＃Vspoilerid =defaultOpenonclick =openPage（'Vspoiler'）> Vulgate version< / a> 
< / li> 
< li> 
< a data-toggle =tabhref =＃Cspoileronclick =openPage（'Cspoiler'）> Campbell version< / a> 
< / li> 
< / ul> 
< div id =Vspoilerclass =tab-pane tabcontent active>< br> 
< table> 
< tbody> 
< tr> 
< td> 
< div class =columnstyle =padding-left：80px> [标签1的第1栏的内容]< / div> 
< / td> 
< td> 
< div class =columnstyle =padding-left：80px> [标签2的第2栏的内容]< / div> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
< / div> 
< div id =Cspoilerclass =tab-pane tabcontent>< br> 
< table> 
< tbody> 
< tr> 
< td> 
< div class =columnstyle =padding-left：80px> [标签2的第1栏的内容]< / div> 
< / td> 
< td> 
< div class =columnstyle =padding-left：80px> [标签2的第2栏的内容]< / div> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
< / div> 
< script> 
 
函数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在那里回答。

$ b $因为脚本在文档 c>是准备好。 （ 同步 ）。
如果您想在 body 的开头或头部保留脚本，请使用de window.onload 函数。

  window.onload = function（）
 {
 //你的代码在这里
} 
  

我的建议是将脚本放置在主体的末尾，也是
bootstrap 和 jquery libs，因为这些脚本将在DOM准备就绪后被触发
。

This is the 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 the above code, there is a element at the end. If it is left there, the output is as desired. If moved to the top, the output changes, in that the contents of all the tabcontents panes (or whatever the best term to call them is) is shown upon loading, and only when an inactive tab is clicked do the contents of the others (in this case 1 but any others if there are more than 2 total) disappear. Why does that happen?

Note: This is a follow-up to this, and the code is mostly by @Bradley who answered there.

解决方案

That's happens because the script run before document is ready. ( sync ). If you want to keep your script at the beginning of the body, or in head, use de window.onload function.

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

My suggestion will be to place the script at the end of the body, also the bootstrap and jquery libs, because those scripts will be fired after the DOM is ready.

这篇关于移动<脚本>改变结果：为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！