隐藏/显示潜水-初始状态

Question

只是在显示/隐藏div时有点困难-

基本上，我试图实现的是有3个不同的链接，每个链接对应三个不同的div，在任何时候都只显示其中一个。我参考了本教程-http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/(标题为"这是一个响应请求的新演示，在任何时候都只显示一个div"的部分)

这一切都正常工作，因为当我点击任何链接时，都会显示正确的div。我遇到的唯一问题是初始状态——我只想最初显示第一个div，但目前它们都同时显示，直到我单击其中一个链接。

我已经在网站上复制了java-

<script> function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("class");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
}
else {
newboxes[x].style.display = 'none';
}
}
}
} </script>

我的潜水器有：

<div id="newboxes1" class="newboxes" style="width: 1124px;">
<div id="newboxes2" class="newboxes">
<div id="newboxes3" class="newboxes">

这3个div都包含许多其他div，它们在类中都没有"newboxes"，但这可能会干扰？

链接位于这3个div之外：

<a href="javascript:showonlyone('newboxes1');">Learn HTML</a><a href="javascript:showonlyone('newboxes2');">Box2</a><a href="javascript:showonlyone('newboxes3');">Box3</a>

据我所见，我已经完全复制了教程中显示的方法，但为此，我的初始状态不能正常工作，而它在教程页面上可以正常工作。

有什么想法吗？谢谢

Answer 1

function showonlyone(element){
for (var i=0; i<document.getElementsByClassName("newboxes").length; i++){
var div = document.getElementById('newboxes'+i);
if(i == element){
div.style.display = 'block';
}else{
div.style.display = 'none';
}
}
}

使用：

showonlyone(1);
//This will show the div with ID="newboxes1"

Answer 2

这不是那么简单吗

<div id="newboxes1" class="newboxes" style="width: 1124px;">
<div id="newboxes2" class="newboxes" style="display:none;">
<div id="newboxes3" class="newboxes" style="display:none;">

Answer 3

在您的头中尝试此操作

<script>
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for (var x = 0; x < newboxes.length; x++) {
name = newboxes[x].getAttribute("class");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
} else {
newboxes[x].style.display = 'none';
}
}
}
}
</script>

接下来是div框和链接

<a id="myHeader1" href="javascript:showonlyone('newboxes1');">Wall Tiles</a>
- <a id="myHeader2" href="javascript:showonlyone('newboxes2');">Floor Tiles</a>
- <a id="myHeader3" href="javascript:showonlyone('newboxes3');">Extras</a>
<div class="newboxes" id="newboxes1">
<iframe src="wall.php" width="600" height="620" frameborder="0"></iframe>
</div>
<div class="newboxes" id="newboxes2">
<iframe src="floor.php" width="600" height="620" frameborder="0"></iframe>
</div>
<div class="newboxes" id="newboxes3">
<iframe src="extras.php" width="600" height="620" frameborder="0"></iframe>
</div>