javascript切换多个Div的可见性

问题描述

我有3个 Divs 在顶部，有3个链接可以切换它的可见性。

默认情况下，所有Div都设置为 display：none ，下面的sript适用于每个对应的div，但需要切换另一个的状态，示例：

链接1 =显示 Div1 / strong>我需要显示 Div2 和隐藏 Div1，Div3 。如果我点击 Link3 =显示 Div3 并隐藏 Div1，Div2 是可见的等等...换句话说，一次显示1个div。

我该怎么办？

 
 code>< a href =＃onclick =toggle_visibility（'Soft'）;>< / a> 
< a href =＃onclick =toggle_visibility（'Broch'）;>< / a> 
< a href =＃onclick =toggle_visibility（'tut'）;>< / a> 
  

DIV

 < div id =Softstyle =display：none;> .....< / div> 
< div id =brochstyle =display：none;> .....< / div> 
< div id =tutstyle =display：none;> .....< / div> 
  

Javascript

  function toggle_visibility（Soft）{
 var soft = document.getElementById（Soft）; 
 if（soft.style.display =='block'）
 soft.style.display ='none'; 
 else 
 soft.style.display ='block'; 
} 
 
函数toggle_visibility（Broch）{
 var e = document.getElementById（Broch）; 
 if（e.style.display =='block'）
 e.style.display ='none'; 
 else 
 e.style.display ='block'; 
 
} 
 
 function toggle_visibility（tut）{
 var e = document.getElementById（tut）; 
 if（e.style.display =='block'）
 e.style.display ='none'; 
 else 
 e.style.display ='block'; 
 
} 
  

解决方案

想要将状态存储在变量上。试试这个：

  var divs = [Soft，broch，tut]; 
 var visibleDivId = null; 
 
 function toggleVisibility（divId）{
 if（visibleDivId === divId）{
 visibleDivId = null; 
} else {
 visibleDivId = divId; 
} 
 
 hideNonVisibleDivs（）; 
} 
 
函数hideNonVisibleDivs（）{
 var i，divId，div; 
 
 for（i = 0; i< divs.length; i ++）{
 divId = divs [i]; 
 div = document.getElementById（divId）; 
 
 if（visibleDivId === divId）{
 div.style.display =block; 
} else {
 div.style.display =none; 
} 
} 
} 
  

工作范例：

I have 3 Divs on top of each other and 3 links to toggle its visibility.
By default all Divs are set to display:none and the sript below works for each corresponding div but need to toggle the state of the other, for example:
Link 1 = Shows Div1 (or vice versa) when I click on Link 2 I need to Show Div2 and Hide Div1,Div3. If I click on Link3 = Show Div3 and Hide Div1,Div2 if they are visible and so on... In other words, Show 1 div at a time.

How can I do it? here is what I have so far.

Links

<a href="#" onclick="toggle_visibility('Soft');"></a>
<a href="#" onclick="toggle_visibility('Broch');"></a>
<a href="#" onclick="toggle_visibility('tut');"></a>

DIVs

<div id="Soft"  style="display: none;">.....</div>
<div id="broch" style="display: none;">.....</div>
<div id="tut"   style="display: none;">.....</div>

Javascript

function toggle_visibility(Soft) {
var soft = document.getElementById(Soft);
 if(soft.style.display == 'block')
    soft.style.display = 'none';
    else
      soft.style.display = 'block';
}

function toggle_visibility(Broch) {
   var e = document.getElementById(Broch);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';

}

function toggle_visibility(tut) {
   var e = document.getElementById(tut);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';

}

解决方案

You might want to store the state on a variable. Try this:

var divs = ["Soft", "broch", "tut"];
var visibleDivId = null;

function toggleVisibility(divId) {
  if(visibleDivId === divId) {
    visibleDivId = null;
  } else {
    visibleDivId = divId;
  }

  hideNonVisibleDivs();
}

function hideNonVisibleDivs() {
  var i, divId, div;

  for(i = 0; i < divs.length; i++) {
    divId = divs[i];
    div = document.getElementById(divId);

    if(visibleDivId === divId) {
      div.style.display = "block";
    } else {
      div.style.display = "none";
    }
  }
}

Working example: http://jsbin.com/Ipezadu/1/

这篇关于javascript切换多个Div的可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！