的JavaScript切换显示/隐藏DIV

我有一个JavaScript切换功能：的JavaScript切换显示/隐藏DIV

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

这样做是：

我有页上和这些链接的点击几个链接它显示/隐藏与它相关的各DIV部分..

在打开和以下两个链接关闭名为div的部分stusearch & facsearch

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

这个效果很好，除了当我点击一个新的切换链接时，我希望隐藏前面显示的切换，此时前一个切换链接保持打开状态，并且新切换链接打开。

来源

2011-08-17 ABI

你是否反对使用jQuery库，比如jQuery？ – Beez

我调整了你的代码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 = ''; 
}

来源

2011-08-17 17:54:16

每次添加一个新的'toggle-able'div时，不必每次更新变量'divs'，也可以为每个div添加一个类，例如'toggleSearch'，并更改'var divs = $（'。toggleSearch “）'; – Beez

查看下面的jQuery解决方案。 – Beez

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

来源

2011-08-17 17:49:41 smartkid

我不认为这是问题。 –

在纯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; 
}

，然后得到新的，展示下。

来源

2011-08-17 17:50:56 Tejs

你可以保持一个局部变量吧，

<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类的知名度和设置它之前做的所有要素类的毯子removel。

来源

2011-08-17 17:52:34 Andrew

这里是万一一个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>

来源

2011-08-18 13:21:47 Beez

的JavaScript切换显示/隐藏DIV

回答

相关问题