求循环点击显示隐藏效果

           <div id="tcgp_item">
                  <div class="tcgp_tu">
                     <img src="images/tcxh_27.gif" width="186" height="134" />
                  </div>
                  <div class="tcgp_tu1">
                      <img src="images/tcxh_27.gif" width="485" height="338" />
                  </div>
            </div>
           <div id="tcgp_item">
                  <div class="tcgp_tu">
                     <img src="images/tcxh_27.gif" width="186" height="134" />
                  </div>
                  <div class="tcgp_tu1">
                      <img src="images/tcxh_27.gif" width="485" height="338" />
                  </div>
            </div>点击tcgp_tu时自身隐藏，tcgp_tu1显示，然后点tcgp_tu1时tcgp_tu1隐藏，显示tcgp_tu；一直可以循环的点击，然后第一个和第二个互不影响？？？？？

解决方案 »

  1.   

    1、id值必须唯一，这是常识；
    2、为便于测试，图片已改为文字，不影响功能。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    window.onload = function() {
    var o = document.getElementsByTagName('div');
    for (var i = 0; i < o.length; i ++) {
    if (o[i].className == 'tcgp_item') {
    var subDiv = o[i].getElementsByTagName('div');
    for (var j = 0; j < subDiv.length; j ++) {
    subDiv[j].onclick = function() {
    this.style.display = 'none';
    var siblingNodes = this.parentNode.getElementsByTagName('div');
    for (var k = 0; k < siblingNodes.length; k ++) if (siblingNodes[k] != this) siblingNodes[k].style.display = 'block';
    }
    }
    }
    }
    }
    </script>
    </head><body>
    <div class="tcgp_item">
      <div class="tcgp_tu">DIV1</div>
      <div class="tcgp_tu1" style="display:none;">DIV2</div>
    </div>
    <div class="tcgp_item">
      <div class="tcgp_tu">DIV3</div>
      <div class="tcgp_tu1" style="display:none;">DIV4</div>
    </div>
    </body>
    </html>