试图隐藏所有可见的 div 并仅显示选定的 div

Question

以下代码用于打开和关闭可见性，但我希望能够隐藏任何可见的 div 并仅显示可见的。这是 HTML:

<div id="main">

    <div id="hiddena">
    </div>
    
    <div id="hiddenb">
    </div>
    
    <div id="hiddenc">
    </div>
    
    <div id="hiddend">
    </div>
    
    <div id="hiddene">
    </div>

</div>

<div id="buttona">
    <button type=submit onclick="switchVisible('hiddena');"></button>
</div>

<div id="buttonb">
    <button type=submit onclick="switchVisible('hiddenb');"></button>
</div>

<div id="buttonc">
    <button type=submit onclick="switchVisible('hiddenc');"></button>
</div>

<div id="buttond">
    <button type=submit onclick="switchVisible('hiddend');"></button>
</div>

<div id="buttone" class="tall">
    <button type=submit onclick="switchVisible('hiddene');"></button>
</div>

这是脚本...

<script type="text/javascript">

function switchVisible(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

</script>

有没有人对可以完成此任务的脚本有任何建议或补充？

Answer 1

一次隐藏所有然后只显示你想要的一个会不会有问题？

function hide_them() {
    var divsList = ["hiddena", "hiddenb", "hiddenc", "hiddend", "hiddene"]
    divsList.forEach(function (element) {
        element.style.visibility = "hidden";
    });
}

最后，只需调用函数开头的 hide_them 函数即可：

function switchVisible(id) {
   hide_them();
   var e = document.getElementById(id);
   e.style.display = 'block';
}

另一种方法是通过标签 select 元素，并将它们全部隐藏（这不是很好的方法，因为当你的代码长大时，它可能会导致不必要的问题）

Answer 2

这里有一些建议

切勿将您的标记与 javascript 混合使用。您可以考虑使用 addeventlistener 或 jQuery bind
ID 应该始终是唯一的。如果你想让多个元素同名，你可以考虑使用 class，因为 document.getelementsbyclassname 总是 returns 一个数组 3.In 您的 show/hide 逻辑，您正在检查元素是 "block" 还是 "none"。显示元素时，默认情况下 element.style.display 将是 "" 而不是 "block"

检查以下代码片段

function switchVisiblebyId(id){
  var element=document.getElementById(id);
var displayStyle=element.style.display;
  if(displayStyle==="" || displayStyle==="block"){
    element.style.display="none";
  }
  else{
    element.style.display="";
  }
}

<div id="hiddena">
  div1
    </div>

    <div id="hiddenb">
      div2
    </div>

    <div id="hiddenc">
      div3
    </div>

    <div id="hiddend">
      div4
    </div>

    <div id="hiddene">
      div5
    </div>


<div id="buttona">button1
    <button type=submit onclick="switchVisiblebyId('hiddena');"></button>
</div>

<div id="buttonb">button2
    <button type=submit onclick="switchVisiblebyId('hiddenb');"></button>
</div>

<div id="buttonc">button3
    <button type=submit onclick="switchVisiblebyId('hiddenc');"></button>
</div>

<div id="buttond">button4
    <button type=submit onclick="switchVisiblebyId('hiddend');"></button>
</div>

<div id="buttone" class="tall">button5
    <button type=submit onclick="switchVisiblebyId('hiddene');"></button>
</div>

希望这有帮助

试图隐藏所有可见的 div 并仅显示选定的 div

Trying to hide all visible divs and show just the selected one

html

javascript

toggle

dom-events