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.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…