求循环点击显示隐藏效果解决思路
日期：2014-05-16 浏览次数：20340 次
求循环点击显示隐藏效果
<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、为便于测试，图片已改为文字，不影响功能。
<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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
