javascript 切換顯示/隱藏 div

Question

我有一個 javascript 開關 function：

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

這是做什么的：

我在頁面上有幾個鏈接，單擊這些鏈接時，它會顯示/隱藏與其關聯的相應 DIV 部分。

在以下兩個鏈接中，它打開和關閉名為 stusearch 和 facsearch 的 div 部分

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

這很好用，除了，我想在單擊新的切換鏈接時隱藏之前顯示的切換，此時前一個保持打開狀態，而新的切換在其下方打開。

Answer 1

我在這里稍微調整了你的代碼。 我最終添加了一個變量來存儲您想要顯示/隱藏的 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 class 控制可見性，並在設置之前從所有元素中全面移除 class。

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>