以下代码可用于打开和关闭可见性,但是我希望能够隐藏任何可见的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>
是否有人对脚本有任何建议或补充,可以完成此任务?
谢谢
最佳答案
一次隐藏所有这些,然后只显示想要的一个会不会有问题?
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';
}
另一种方法是按标签选择元素,然后将其全部隐藏(这不是很好的方法,因为当代码长大时,可能会导致不必要的问题)
关于javascript - 尝试隐藏所有可见的div并仅显示所选的div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40094366/