0

我有以下代码，效果很好！当我单击链接 1 时，会出现 DIV 内容。当我再次单击它时，它消失了。如果我再次单击 Link 1，则 DIV 内容会再次出现。如果我这次单击链接 2，内容将与链接 1 内容一起出现。如果单击另一个 DIV 链接，我希望链接 1 消失。我不想在打开另一个内容之前关闭该内容。单击另一个DIV后如何使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;
  }

分区：

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

我不想改变我这样做的方式，我觉得有一个简单的解决方案，我就是想不通！任何帮助表示赞赏。

4

2 回答 2

3

另一个更好的答案是使用 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>
于 2013-01-30T22:40:35.433 回答
1

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/

于 2013-01-30T22:22:59.823 回答