一次显示/隐藏一个Javascript

Show/Hide Javascript one at a time

本文关键字：一个 隐藏 Javascript 显示 一次      更新时间：2023-09-26

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

我有两个锚点，它们切换自己的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>

给div的公共类

<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>

进一步挖掘，我找到了一个解决方案：

<script type="text/javascript" language="JavaScript">
(function() { 
    var opened_element = null;
    window.ReverseDisplay = function(d) {
       var e = document.getElementById(d);
       if (opened_element && opened_element !== e) {
           opened_element.style.display = 'none';
       }
       if(e.style.display == 'block') {
          e.style.display = 'none';
       }
       else {
          e.style.display = 'block';
       }
       opened_element = e;
    };
}());</script>

您可以

function ReverseDisplay(d) {
  var el = document.getElementById(d),
    els = document.getElementsByClassName('list'),
    c;
  for (var i = 0; i < els.length; i++) {
    c = els[i];
    if (el == c) {
      if (el.style.display == "block") {
        el.style.display = "none";
      } else {
        el.style.display = "block";
      }
    } else {
      c.style.display = "none";
    }
  }
}
.list {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></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" class="list">Some content 1</div>
<div id="resoList" class="list">Some content 2</div>

下面是jQuery，用于那些可以使用它的人：

function hideTarget(elem){
    $(elem).hide();
}
function showTarget(elem, target, hideThis){
    $(elem).click(function(){
        $(target).show();
        hideTarget(hideThis);
    });
}

showTarget('#reso','#resoList','#menuList');
showTarget('#menus','#menuList','#resoList');

这是小提琴。

相关文章：