Question

这是代码：

＆＃xA;＆＃xA;

 ＆lt; link rel =“stylesheet”href =“https://maxcdn.bootstrapcdn.com/bootstrap/3.3 0.7 / CSS / bootstrap.min.css“＆GT; ＆＃xA;＆lt; script src =“https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”＆gt;＆lt; / script＆gt; ＆＃xA;＆lt; script src =“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”＆gt;＆lt; / script＆gt; ＆＃xA;＆lt; div style =“text-align：justify”＆gt; [简介文字]＆lt; / div＆gt; ＆LT峰; br＆GT; ＆LT峰; br＆GT; ＆＃xA;＆lt; ul class =“nav nav-tabs”＆gt; ＆＃XA; ＆lt; li class =“active”＆gt;＆＃xA; ＆lt; a data-toggle =“tab”href =“＃Vspoiler”id =“defaultOpen”onclick =“openPage（'Vspoiler'）”＆gt; Vulgate版本＆lt; / a＆gt;＆＃xA; ＆LT; /锂＆GT; ＆＃XA; ＆LT;李＆GT;＆＃XA; ＆lt; a data-toggle =“tab”href =“＃Cspoiler”onclick =“openPage（'Cspoiler'）”＆gt; Campbell版＆lt; / a＆gt;＆＃xA; ＆LT; /锂＆GT; ＆＃XA;＆LT; / UL＆GT; ＆＃xA;＆lt; div id =“Vspoiler”class =“tab-pane tabcontent active”＆gt;＆lt; br＆gt; ＆＃XA; ＆LT;表＆gt;＆＃XA; ＆LT; TBODY＆GT;＆＃XA; ＆LT; TR＆GT;＆＃XA; ＆LT; TD＆GT;＆＃XA; ＆lt; div class =“column”style =“padding-left：80px”＆gt; [标签1的第1栏的内容]＆lt; / div＆gt;＆＃xA; ＆LT; / TD＆GT;＆＃XA; ＆LT; TD＆GT;＆＃XA; ＆lt; div class =“column”style =“padding-left：80px”＆gt; [标签2的第2栏的内容]＆lt; / div＆gt;＆＃xA; ＆LT; / TD＆GT;＆＃XA; ＆LT; / TR＆GT;＆＃XA; ＆LT; / tbody的＆GT;＆＃XA; ＆LT; /表＆gt;＆＃XA;＆LT; / DIV＆GT; ＆＃xA;＆lt; div id =“Cspoiler”class =“tab-pane tabcontent”＆gt;＆lt; br＆gt; ＆＃XA; ＆LT;表＆gt;＆＃XA; ＆LT; TBODY＆GT;＆＃XA; ＆LT; TR＆GT;＆＃XA; ＆LT; TD＆GT;＆＃XA; ＆lt; div class =“column”style =“padding-left：80px”＆gt; [标签2的第1栏的内容]＆lt; / div＆gt;＆＃xA; ＆LT; / TD＆GT;＆＃XA; ＆LT; TD＆GT;＆＃XA; ＆lt; div class =“column”style =“padding-left：80px”＆gt; [标签2的第2栏的内容]＆lt; / div＆gt;＆＃xA; ＆LT; / TD＆GT;＆＃XA; ＆LT; / TR＆GT;＆＃XA; ＆LT; / tbody的＆GT;＆＃XA; ＆LT; /表＆gt;＆＃XA;＆LT; / DIV＆GT; ＆＃XA;＆LT;脚本＆GT; ＆＃XA;＆＃XA; function openPage（pageName）{＆＃xA; var i，tabcontent; ＆＃XA; tabcontent = document.getElementsByClassName（“tabcontent”）; ＆＃XA; for（i = 0; i＆lt; tabcontent.length; i ++）{＆＃xA; tabcontent [i] .style.display =“none”; ＆＃XA; ＆＃xA;＆＃xA; document.getElementById（pageName）.style.display =“block”; ＆＃XA; }＆＃XA;＆＃XA;的document.getElementById（ “defaultOpen”）点击（）。 ＆＃xA;＆＃xA;＆lt; / script＆gt;＆＃xA;

＆＃xA;＆＃xA;

在上面的代码中，最后有一个元素。如果它留在那里，输出是所希望的。如果移到顶部，则输出会发生变化，因为加载时会显示所有 tabcontents 窗格的内容（或称为它们的最佳术语），并且仅在单击非活动选项卡时显示做其他人的内容（在这种情况下是1，但如果总共超过2，则为其他任何内容）消失。为什么会发生这种情况？

＆＃xA;＆＃xA;

注意：这是对此的后续行动，代码主要由@Bradley回答。

＆＃xA ;

Answer 1

之所以发生这种情况，是因为script之前的document运行ready。（同步）。如果您希望将script保留在body的开头或头部，请使用de window.onload功能。

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

我的建议是将script放在身体的尽头 bootstrap和jquery库，因为这些脚本将被触发在DOM准备好之后。

移动<script>会改变结果：为什么？

1 个答案: