Javascript 如何显示&；同时动态隐藏div？

大家好，我是HTML和JS新手，我正在尝试创建一个函数，该函数将只显示希望显示的div，我希望使其成为动态的，因为div可以超过5。我想像第一个按钮一样，我只想显示D1 div，如果我单击按钮2，div的其余部分将被隐藏，D1将被隐藏，而上面的d3将被隐藏。我将非常感谢您的任何建议或帮助。谢谢

函数myFunction（t，n）{
var g=t+n；
var x=document.getElementById（g）；
如果（g==“D1”）{
x、 style.display=“block”；
//隐藏分区d2到d5或更多分区仅显示d1
}否则，如果（g==“D2”）{
x、 style.display=“block”；
//隐藏分区d1，然后从d3到d5或更多分区仅显示d2
}否则，如果（g==“D3”）{
x、 style.display=“block”；
}否则如果（g==“D4”）{
x、 style.display=“block”；
}否则，如果（g==“D5”）{
x、 style.display=“block”；
}
}

B1
地下二层
地下三层
B4
B5
这是我的DIV元素。
这是我的DIV元素。
这是我的DIV元素。
这是我的DIV元素。
这是我的DIV元素。

首先，全部隐藏，然后只显示要显示的一个

函数myFunction（t，n）{
//先隐藏一切
对于（var i=1；i，首先隐藏全部，然后只显示要显示的一个


函数myFunction（t，n）{
//先隐藏一切
对于（var i=1；i
函数myFunction（t，n）{
var g=t+n；
对于（设i=1；i
函数myFunction（t，n）{
var g=t+n；
对于（设i=1；i您的答案应该是forEach循环。我在div中添加了数字，以便更清楚地说明发生了什么：

    <button onclick="myFunction('D','1')">B1</button>
<button onclick="myFunction('D','2')">B2</button>
<button onclick="myFunction('D','3')">B3</button>
<button onclick="myFunction('D','4')">B4</button>
<button onclick="myFunction('D','5')">B5</button>

<div id="D1" style="Display:none">
  This is my DIV 1 element.
</div>

<div id="D2" style="Display:none">
  This is my DIV 2 element.
</div>
<div id="D3" style="Display:none">
  This is my DIV 3 element.
</div>
<div id="D4" style="Display:none">
  This is my DIV 4 element.
</div>
<div id="D5" style="Display:none">
  This is my DIV 5 element.
</div>

您还可以签出。
您的答案应该是forEach循环。我在div中添加了数字，以便更清楚地说明发生了什么：

    <button onclick="myFunction('D','1')">B1</button>
<button onclick="myFunction('D','2')">B2</button>
<button onclick="myFunction('D','3')">B3</button>
<button onclick="myFunction('D','4')">B4</button>
<button onclick="myFunction('D','5')">B5</button>

<div id="D1" style="Display:none">
  This is my DIV 1 element.
</div>

<div id="D2" style="Display:none">
  This is my DIV 2 element.
</div>
<div id="D3" style="Display:none">
  This is my DIV 3 element.
</div>
<div id="D4" style="Display:none">
  This is my DIV 4 element.
</div>
<div id="D5" style="Display:none">
  This is my DIV 5 element.
</div>

您还可以签出。

函数myFunction（t）{
['D1'，'D2'，'D3'，'D4'，'D5'].forEach（（div）=>{
如果（div！==t）{
document.getElementById（div.style.display=“无”；
}否则{
document.getElementById（div.style.display=“block”；
}
});
}
B1
地下二层
地下三层
B4
B5
这是我的D1 DIV元素。
这是我的D2分区元素。
这是我的D3分区元素。
这是我的D4 DIV元素。
这是我的D5 DIV元素。

函数myFunction（t）{
['D1'，'D2'，'D3'，'D4'，'D5'].forEach（（div）=>{
如果（div！==t）{
document.getElementById（div.style.display=“无”；
}否则{
document.getElementById（div.style.display=“block”；
}
});
}
B1
地下二层
地下三层
B4
B5
这是我的D1 DIV元素。
这是我的D2分区元素。
这是我的D3分区元素。
这是我的D4 DIV元素。
这是我的D5 DIV元素。

函数myFunction（t，n）{
var g=t+n；
var dates=document.querySelectorAll（'*[id^=“D”]'）；
对于（var i=0；i
函数myFunction（t，n）{
var g=t+n；
var dates=document.querySelectorAll（'*[id^=“D”]'）；
对于（var i=0；i
function myFunction(t, n) {
  var g = t + n;
  // get all Divs
const allDivs = document.querySelectorAll("div");
  allDivs.forEach(div => {
    if(div.id == t+n) {
      div.style.display = "block";
    } else {
      div.style.display = "none"
    }
  })
}