如何添加另一個顯示/隱藏切換器div？

我發現這個代碼在W3S：如何添加另一個顯示/隱藏切換器div？

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show

什麼我要找的是不是有1個格，但有3周不同的div顯示/隱藏。

我相信這部分var x = document.getElementById('myDIV');必須改變，以能夠有充足的不同的div來顯示/隱藏..

誰能告訴我應該怎樣寫，而不是讓它工作，我想要的方式？

謝謝！親切的問候，辛西婭

來源

2017-06-22 Cynthia

爲什麼不自己嘗試它，如果它不工作，有一個問題回到這裏？ – Cristina

這正是我在做的:) – Cynthia

您可以使用document.getElementsByTagName("DIV");

function myFunction() { 
 
    var x = document.getElementsByTagName("DIV"); 
 

 
     for(var i=0; i < x.length; i++) 
 
     { 
 
     if (x[i].style.display === 'none') { 
 
      x[i].style.display = 'block'; 
 
     } else { 
 
      x[i].style.display = 'none'; 
 
     } 
 
     } 
 
    
 
}

.myDIV { 
 
    width: 25%; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
    background-color: lightblue; 
 
    margin-top:20px; 
 
    margin-right:10px; 
 
}

<body> 
 

 
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<div class="myDIV"> 
 
This is my DIV element. 
 
</div> 
 

 
<div class="myDIV"> 
 
This is my DIV element. 
 
</div> 
 

 
<div class="myDIV"> 
 
This is my DIV element. 
 
</div> 
 

 
</body>

來源

2017-06-22 12:00:58 Raj

嗨，謝謝你的回答，我不認爲我解釋了正確的方式，對不起。我不想找3個div。我正在尋找有3個「試用」按鈕，並顯示一次點擊按鈕時顯示的不同信息。如「試用按鈕1」表示一個名稱一個粉紅色的盒子「試試看按鈕2」顯示了一些一個藍色的盒子「試試看按鈕3」顯示了圖像一個黃色的盒子，所有這些應具有顯示/隱藏功能並且不依賴於其他按鈕。 – Cynthia

嗨@Raj，我用這部分'var x = document.getElementsByTagName（「DIV」）;'的代碼，並最終發現它，非常感謝！ – Cynthia

如何添加另一個顯示/隱藏切換器div？

回答

相關問題