0

うまく機能する次のコードがあります。リンク 1 をクリックすると、DIV コンテンツが表示されます。もう一度クリックすると消えます。リンク 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

Another, better answer would be to use jQuery, because it lets you write better javascript without having to worry about whether IE is going to break.

include this tag in the head:

<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 に答える