隱藏/顯示的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 - 初始狀態

回答

相關問題