我如何確保始終顯示至少一個DIV？

Question

我發現這段代碼可以使用JavaScript顯示或隱藏DIV。 它只允許顯示一個div，這是我想要的。 但是，我希望每次始終至少顯示一個DIV。 它基本上在隱藏和顯示它們之間切換。 我希望它成為如果我再次擊中DIV的地方，它將不會將其隱藏起來，並且將不會執行任何操作。 請幫忙，謝謝。

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

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

Answer 1

您可以簡化代碼以使其遵循。 隱藏所有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> 

Answer 2

導致此函數隱藏div的部分是visibleDivId的設置為null。

function divVisibility(divId) {
  if(visibleDivId === divId) {
    // visibleDivId = null;
  } else {
    visibleDivId = divId;
  }
  hideNonVisibleDivs();
}

注釋掉該行（請參閱第3行）會使單擊的div保持為visibleDivId，而第二個函數（hideNonVisibleDivs）不會將其隱藏。