Javascript переключатель, чтобы показать / скрыть Div

Question

У меня есть функция переключения javascript:

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

Это работает хорошо, за исключением того, что я хотел бы скрыть предыдущий показанныйпереключаться при нажатии новой ссылки, в то время как предыдущая остается открытой, а новая открывается под ней.

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

Вот решение 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>

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

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