Question

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

我有两个锚点来切换自己的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的公共类

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

Answer 2

进一步挖掘并找到了解决方案：

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

Answer 3

你可以

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>

Answer 4

以下是那些可以使用它的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');

Here is the fiddle.

一次显示/隐藏一个Javascript

4 个答案: