[英]How could I make sure that at least one DIV is always shown?
I have this piece of code I found that will show or hide a DIV using javascript. 我发现这段代码可以使用JavaScript显示或隐藏DIV。 It only allows one div to be shown which is what I want. 它只允许显示一个div,这是我想要的。 However, I want it where at least one DIV is always shown at a time. 但是,我希望每次始终至少显示一个DIV。 It basically toggles between hiding and showing them currently. 它基本上在隐藏和显示它们之间切换。 I want it to be where if i hit DIV two again, it wont hide it and it will do nothing. 我希望它成为如果我再次击中DIV的地方,它将不会将其隐藏起来,并且将不会执行任何操作。 Please help, thank you. 请帮忙,谢谢。
page.html page.html中
<script src="scripts/pages.js"></script>
<div class="main_div">
<div class="inner_div">
<div id="Div1">I'm Div One</div>
<div id="Div2" style="display: none;">I'm Div Two</div>
<div id="Div3" style="display: none;">I'm Div Three</div>
<div id="Div4" style="display: none;">I'm Div Four</div>
</div>
<div class="buttons">
<a href="#" onclick="divVisibility('Div1');">Div1</a> |
<a href="#" onclick="divVisibility('Div2');">Div2</a> |
<a href="#" onclick="divVisibility('Div3');">Div3</a> |
<a href="#" onclick="divVisibility('Div4');">Div4</a>
</div>
</div>
pages.js pages.js
var divs = ["Div1", "Div2", "Div3", "Div4"];
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
You can simplify your code to following. 您可以简化代码以使其遵循。 Where you hide all the divs and show the div corresponding to the clicked element. 隐藏所有div并显示与单击的元素相对应的div的位置。
function divVisibility(divId) { document.querySelectorAll(".inner_div > div").forEach(e => e.style.display = 'none'); document.getElementById(divId).style.display = 'block'; }
<div class="main_div"> <div class="inner_div"> <div id="Div1">I'm Div One</div> <div id="Div2" style="display: none;">I'm Div Two</div> <div id="Div3" style="display: none;">I'm Div Three</div> <div id="Div4" style="display: none;">I'm Div Four</div> </div> <div class="buttons"> <a href="#" onclick="divVisibility('Div1');">Div1</a> | <a href="#" onclick="divVisibility('Div2');">Div2</a> | <a href="#" onclick="divVisibility('Div3');">Div3</a> | <a href="#" onclick="divVisibility('Div4');">Div4</a> </div> </div>
The part that causes this function to hide a div is the setting of visibleDivId to null. 导致此函数隐藏div的部分是visibleDivId的设置为null。
function divVisibility(divId) {
if(visibleDivId === divId) {
// visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
Commenting that line out (see line 3) keeps the clicked div as the visibleDivId and the second function (hideNonVisibleDivs) won't hide it. 注释掉该行(请参阅第3行)会使单击的div保持为visibleDivId,而第二个函数(hideNonVisibleDivs)不会将其隐藏。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.