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

只要有一点与显示/隐藏div的难度 -隐藏/显示的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则有：

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

至于我可以看到我已经抄在本教学中准确，但是对于我的初始状态并不正常工作的方法，而它在教程页面上。

任何想法？谢谢！

来源

2012-11-21 oolaef

看看这个答案： http://stackoverflow.com/questions/13491306/function-to-hide-multiple-divs/13491406#13491406 （这个问题的复制） – Cerbrus

是它并不是这么简单，

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

来源

2012-11-21 13:16:41 DickieBoy

他想能够切换显示div，像这里： http://stackoverflow.com/questions/13491306/function-to-hide-multiple-divs/13491406#13491406 – Cerbrus

_“这一切工作正常，当我点击任何我的链接，正确的div显示。我遇到的唯一问题是初始状态 - 我只想要第一个div初始显示，但是目前它们全部同时显示，直到我点击其中一个链接。“_ – DickieBoy

将此添加到javascript的末尾： showonlyone（“newboxes1”）'（或不同的ID） – Cerbrus

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"

来源

2012-11-21 13:25:38 Cerbrus

在头试试这个

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

来源

2013-12-02 16:37:54

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

回答

相关问题