javascript - 一次显示/隐藏 Javascript

Question

这可能非常简单，但我不知所措。

我有两个 anchor 可以切换它们自己的 div 容器的显示。现在，您可以通过单击每个按钮一次来显示两个 div 容器。我希望一次只显示一个 div。

因此，如果您选择按钮 1 以显示 div 1，然后您选择按钮 2，它将显示 div 2 但也会隐藏 div 1。

这是我的代码:

<script type="text/javascript" language="JavaScript">
  function ReverseDisplay(d) 
  {
    if(document.getElementById(d).style.display == "none") 
      { document.getElementById(d).style.display = "block"; }
    else 
      { document.getElementById(d).style.display = "none"; }
  }
</script>

<a id="menus" href="javascript:ReverseDisplay('menuList')">Button 1</a>
<a id="reso" href="javascript:ReverseDisplay('resoList')">Button 2</a>

<p>Some content</p>

<div id="menuList" style="display:none;">Some content</div>
<div id="resoList" style="display:none;">Some content</div>

Answer 1

给div的公共(public)类

<div id="menuList" class="content" style="display:none;">Some content 1</div>
<div id="resoList" class="content" style="display:none;">Some content 2</div>

然后在显示具体之前隐藏所有:

function ReverseDisplay(d) {
    [].slice.call(document.querySelectorAll('.content')).forEach(function(el) {
        el.style.display = 'none';
    });

    var element = document.getElementById(d);
    element.style.display = element.style.display == "none" ? "block" : "none";
}

查看下面的演示。

function ReverseDisplay(d) {
    [].slice.call(document.querySelectorAll('.content')).forEach(function(el) {
        el.style.display = 'none';
    });
    
    var element = document.getElementById(d);
    element.style.display = element.style.display == "none" ? "block" : "none";
}

.content {
  padding: 10px;
  background: #EEE;
}

<a id="menus" href="javascript:ReverseDisplay('menuList')">Button 1</a>
<a id="reso" href="javascript:ReverseDisplay('resoList')">Button 2</a>

<p>Some content</p>

<div id="menuList" class="content" style="display:none;">Some content 1</div>
<div id="resoList" class="content" style="display:none;">Some content 2</div>