Question

我有一个javascript切换功能：

<script type="text/javascript"> 
    function toggle(layer) {
    var d = document.getElementById(layer);
    d.style.display = (d.style.display == 'none') ? '' : 'none';
    }
    </script>

这是做什么的：

我在页面上有一些链接，点击这些链接会显示/隐藏与之关联的相应DIV部分..

在以下两个链接中，它打开并关闭名为stusearch＆amp;的div部分。 facsearch

<a href="javascript:toggle('stusearch')" ><b>Student Manager</b></a>
<a href="javascript:toggle('facsearch')" ><b>Faculty Manager</b></a>

这很有效，但是，我想在点击新的切换链接时隐藏之前显示的切换，前一个切换链接保持打开状态，并且新的切换链接在其下方打开。

Answer 1

我稍稍调整了你的代码here。我最后添加了一个变量来存储你想显示/隐藏的div，以防你想要添加更多div来切换：

var divs = [ "stusearch", "facsearch" ];
function toggle(layer) {
    var d
    for(var i = 0; i < divs.length; i += 1) {
        d = document.getElementById(divs[i]);
        d.style.display = 'none';
    }
    d = document.getElementById(layer);
    d.style.display = '';
}

Answer 2

<script type="text/javascript"> 
function toggle(layer) {
var d = document.getElementById(layer);
d.style.visibility = (d.style.visibility == 'hidden') ? 'visible' : 'hidden';
}
</script>

Answer 3

在纯JavaScript中，最简单的方法是“记住”你修改的最后一个元素 - 又名：

var lastElement = null;

function toggle(elementId)
{
    if(lastElement != null)
        lastElement.style.display = 'none';

    var newElement = document.getElementById(elementId);

    newElement.style.display = (newElement.style.display == 'none') ? 'visible' : 'none';

    if(newElement != lastElement)
       lastElement = newElement;
}

隐藏最后一个引用，然后获取新引用并显示它。

Answer 4

你可以保留一个局部变量，

<script type="text/javascript">
  function(){ 
   var shown;
   window.toggle = function(layer) {
     if(shown)
        shown.style.display = '';
     var d = document.getElementById(layer);
     d.style.display = (d.style.display == 'none') ? '' : 'none';
     shown = d;
   }
  }
</script>

或者，您可以使用css类控制可见性，并在设置之前从所有元素执行类的全面删除。

Answer 5

如果你决定实现一个库，这是一个jQuery解决方案：

JavaScript：

function toggle(layer) {
    $('.toggleableSearch').hide();
    $(layer).show();
}

html：

<a href="javascript:toggle('stusearch')" ><b>Student Manager</b></a>
<a href="javascript:toggle('facsearch')" ><b>Faculty Manager</b></a>

<div id="stusearch" class="toggleableSearch"></div>
<div id="facsearch" class="toggleableSearch"></div>

javascript切换显示/隐藏div

5 个答案: