1. 爱易网页
  2. JavaSript
  3. 求循环点击显示隐藏效果解决思路

求循环点击显示隐藏效果解决思路

日期：2014-05-16　 浏览次数：20383 次

求循环点击显示隐藏效果
<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、id值必须唯一，这是常识；
2、为便于测试，图片已改为文字，不影响功能。
HTML code
<!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>

相关资料更多>

  1. j2ee学习小结之jsp
  2. 前台开发jquery仍是extjs？javascript大家都用什么IDE
  3. 一个十分高效的js的trim截取字符串-原生方法-正则表达式
  4. JavaScript小事例
  5. jsf+a4j 实现上拉框联动
  6. js 跃出框架或 iframe
  7. 碰到一件很奇怪的事情，javascript
  8. 像这样的代码要如何通过PHP来实现
  9. 用JavaScript画直线、圆、扁圆形(不用VML,Canvas) | #hta #javascript #2d