这是代码:
<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在那里回答。
这是因为在script
之前运行的document
是ready
。 ( 同步 )。如果你想把你的script
保持在body
的开头,或者在头部,请使用de window.onload
函数。
window.onload = function()
{
// your code goes here
}
我的建议是将
script
放在正文的末尾,也就是bootstrap
和jquery
库,因为这些脚本将在DOM准备好后被触发。