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

Question

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

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

这是脚本...

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

另一种方法是按标签选择元素，然后将其全部隐藏（这不是很好的方法，因为当代码长大时，可能会导致不必要的问题）

Answer 2

这里的一些建议

1. 切勿将您的标记与javascript混合使用。 您可以考虑使用addeventlistener或jQuery bind在JavaScript上绑定onclick
2. ID应该始终是唯一的。 如果要使多个元素具有相同的名称，则可以考虑使用class，因为document.getelementsbyclassname总是返回数组3。在显示/隐藏逻辑中，您正在检查元素是“ 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> 

希望这可以帮助