首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

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

2012-06-19 
求循环点击显示隐藏效果div idtcgp_itemdiv classtcgp_tuimg srcimages/tcxh_27.gif width

求循环点击显示隐藏效果
<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> 

热点排行