Question

我有3个 Divs ，并且有3个链接可以切换其可见性。
默认情况下，所有Div都设置为display:none，并且下面的sript适用于每个相应的div，但需要切换另一个的状态，例如：
链接1 =当我点击链接2 我需要显示 Div1 （反之亦然） > Div2 并隐藏 Div1，Div3 。如果我点击 Link3 =显示 Div3 并隐藏 Div1，Div2 是可见的等等......换句话说，一次显示1个div。

我该怎么办？这是我到目前为止所做的。

链接

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

的DIV

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

}

Answer 1

您可能希望将状态存储在变量上。试试这个：

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";
    }
  }
}

工作示例：http://jsbin.com/Ipezadu/1/

Answer 2

使用JQuery非常容易。 JSFiddle

<a href="#" data-div="div1">Toggle DIV 1</a>
<a href="#" data-div="div2">Toggle DIV 2</a>
<a href="#" data-div="div3">Toggle DIV 3</a>

<div id="div1">DIV 1</div>
<div id="div2" style="display: none">DIV 2</div>
<div id="div3">DIV 3</div>

$('a').on('click', function() {
   $('div[id="' + $(this).data('div') + '"]').toggle(); 
});

javascript切换多个Div的可见性

2 个答案: