Question

我在W3S找到了这段代码：

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

而我正在寻找的不是拥有1个div而是要显示/隐藏3个不同的div。

我认为必须更改此部分var x = document.getElementById('myDIV');才能显示/隐藏大量不同的div ..

有人可以告诉我应该写什么来让它按照我想要的方式工作吗？

谢谢！亲切的问候，辛西娅

Answer 1

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

＆＃13;

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';
        }
      }
    
}

＆＃13;

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

＆＃13;

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

＆＃13;

如何添加另一个show / hide toggler div？

1 个答案: