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）将不会隐藏它。

我如何确保始终显示至少一个DIV？

2 个答案: