的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

回答

相關問題