Question

我有以下代码，用于启用div在可见和隐藏之间切换：

function toggle_visibility(id,$this) {
  var e = document.getElementById(id);
   if(e.style.display == 'block')
   {
     e.style.display = 'none';
   }
   else
   {
     e.style.display = 'block';
   }
}

基本上当我点击一个onclick =“toggle_visibility（'4s'）;在其中的链接时，会显示指定的div，然后当你再次点击时它会被隐藏。

我的问题是当相同的代码用于多个链接，并且您切换一个然后另一个的可见性时，仍会显示前一个。我怎样才能在切换时只显示一个div，然后如果另一个被切换则另一个被隐藏？

Answer 1

保留当前可见的div的全局变量，并在使任何div可见时使其不可见。

var previousVisibleElement;
function toggle_visibility(id,$this) {
  var e = document.getElementById(id);
  if(e.style.display == 'block')
   {
     e.style.display = 'none';
  }
  else
  {
     if(previousVisibleElement !=null)
          previousVisibleElement.style.display='none';
     e.style.display = 'block';
    previousVisibleElement=e;

  }
}

Answer 2

Here是使用jquery的通用示例。

<强>标记

<section>
    <div id="1">one</div>
    <div id="2">two</div>
    <div id="3">three</div>
    <div id="4">four</div>
</section>
<a href="#1">one</a>
<a href="#2">two</a>
<a href="#3">three</a>
<a href="#4">four</a>

<强> JS

var divs = $('section div'),
    links = $('a');

links.click(function(){
    $(this.hash).toggle().siblings().hide();
    return false;
});

Answer 3

如果您在jsfiddle中提供当前脚本，人们将能够更好地回答。

这是我使用jquery做的一个小样本。 hide using jquery toggle

使用javascript切换div的可见性

3 个答案: