Javascript 隐藏/显示div-初始状态

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

基本上，我试图实现的是有3个不同的链接，每个链接对应三个不同的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>

功能仅显示一个（氯乙烯酮）{
var newbox=document.getElementsByTagName（“div”）；
对于（var x=0；x来说，它不是像

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

在标题中尝试此选项

<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>


功能仅显示一个（氯乙烯酮）{
var newbox=document.getElementsByTagName（“div”）；
对于（变量x=0；x

然后是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>


- 
- 
看看这个答案：（重复该问题）他希望能够切换显示div，如下所示：“这一切都正常工作，当我单击任何链接时，都会显示正确的div。我唯一的问题是初始状态-我只希望第一个div最初显示，但当前它们都同时显示，直到我单击其中一个链接为止。”在javascript末尾添加以下内容：
showonlyone（“newboxes1”）
（或另一个ID）感谢大家的快速响应！您发布的代码似乎无法正常工作，我一次将所有div都设置为初始状态（与以前一样），而链接没有任何作用？我将java设置为：function show onlyone（newboxes1）{for（var i=0；iI还意识到“thechosenone”应该被我的“newboxes1”id替换，在我提供的java示例中，我尝试了这个方法，但没有改变任何东西。有什么想法吗？
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"

<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>

<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>