JavaScript循环DIV显示/隐藏效果
<!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" lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title></head><body><ul class="qusetionList"><li class="liBody"><a href="#" title="" class="openLink">打开</a></li><li class="answer"><a href="#" title="" class="closeLink">关闭</a></li><li class="liBody"><a href="#" title="" class="openLink">打开</a></li><li class="answer"><a href="#" title="" class="closeLink">关闭</a></li><li class="liBody"><a href="#" title="" class="openLink">打开</a></li><li class="answer"><a href="#" title="" class="closeLink">关闭</a></li><li class="liBody"><a href="#" title="" class="openLink">打开</a></li><li class="answer"><a href="#" title="" class="closeLink">关闭</a></li><li class="liBody"><a href="#" title="" class="openLink">打开</a></li><li class="answer"><a href="#" title="" class="closeLink">关闭</a></li></ul> <script> document.getElementsByClassName = function(eleClassName) { var getEleClass = [];//定义一个数组 var myclass = new RegExp("\\b"+eleClassName+"\\b");//创建一个正则表达式对像 var elem = this.getElementsByTagName("*");//获取文档里所有的元素 for(var h=0;h<elem.length;h++) { var classes = elem.className;//获取class对像 if (myclass.test(classes)) getEleClass.push(elem);//正则比较，取到想要的CLASS对像 } return getEleClass;//返回数组 } var answer = document.getElementsByClassName("answer"); var openLink = document.getElementsByClassName("openLink"); var closeLink = document.getElementsByClassName("closeLink"); for (i = 0; i< openLink.length ; i++ ) { ( function(i){ openLink.onclick = function (){ var j = i; answer.style.display = "block" } closeLink.onclick = function (){ var j = i; answer.style.display = "none" } } )(i); } </script></body></html>
页:
[1]