单击另一个DIV时如何使DIV消失？

Question

我有下面的代码很好用！ 当我单击链接1时，将显示DIV内容。 当我再次单击它时，它消失了。 如果再次单击“链接1”，则DIV内容再次出现。 如果我这次单击链接2，则内容将与链接1内容一起出现。 如果要单击另一个DIV链接，我希望链接1消失。 我不想在打开另一个内容之前先关闭该内容。 单击另一个后，如何使DIV消失？

使用Javascript：

function show(ele)    {      
    var srcElement = document.getElementById(ele);      
    if(srcElement != null)      {         
      if(srcElement.style.display == "block")         {      
        srcElement.style.display= 'none';       
      }         
      else         { 
        srcElement.style.display='block';         
      }      
    }   
    return false;
  }

DIV：

<a href="#" onclick="show('link1')">FIRST LINK</a> 
<a href="#" onclick="show('link2')">SECOND LINK</a>

<div id="link1" style="display:none">
   <p>Link 1 Content Displayed</p>
</div>

<div id="link2" style="display:none">
   <p>Link 2 Content Displayed</p>
</div>

我不想改变执行此操作的方式，我觉得有一个简单的解决方案，只是想不通！ 任何帮助表示赞赏。

Answer 1

另一个更好的答案是使用jQuery，因为它使您可以编写更好的javascript，而不必担心IE是否会崩溃。

将此标签放在头部：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

使用Javascript：

function show( elem )
{
    $('.dynamic_link').hide();
    $('#'+elem).show();
}

HTML：

<a href="#" onclick="show('link1')">FIRST LINK</a> 
<a href="#" onclick="show('link2')">SECOND LINK</a>

<div id="link1" class="dynamic_link" style="display:none">
   <p>Link 1 Content Displayed</p>
</div>

<div id="link2" class="dynamic_link" style="display:none">
   <p>Link 2 Content Displayed</p>
</div>

Answer 2

Javascript（已修改）：

 function show(ele)    {      
    var links = ['link1','link2'];
    var srcElement = document.getElementById(ele);      
    var doShow = true;
    if(srcElement != null && srcElement.style.display == "block")
        doShow = false;
    for( var i = 0; i < links.length; ++i )    {
        var otherElement = document.getElementById(links[i]);      
        if( otherElement != null )
            otherElement.style.display = 'none';
    }
    if( doShow )
        srcElement.style.display='block';         
    return false;
  }

工作示例： http : //jsfiddle.net/vDKmA/