求循环点击显示隐藏效果
<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、为便于测试,图片已改为文字,不影响功能。
<!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>