<!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> <style type="text/css"> *{margin:0px auto; padding:0px;} #wai{width:600px; height:700px; } .liebiao{width:600px; height:100px; text-align:center; vertical-align:bottom; background-color:#03F; line-height:100px;margin-top:5px; font-size:24px; cursor:pointer;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div id="wai"> <div class="liebiao" bb="0">一二三</div> <div class="liebiao" bb="0">四五</div> <div class="liebiao" bb="0">上山打</div> <div class="liebiao" bb="0">松鼠打</div> <div class="liebiao" bb="0">不过</div> <div class="liebiao" bb="0">仓鼠</div> </div> </body> <script type="text/javascript"> var aa = document.getElementsByClassName("liebiao"); for(var i=0;i<aa.length;i++){ aa[i].onclick=function(){ for(var i=0;i<aa.length;i++){ aa[i].style.backgroundColor = "#03F"; aa[i].getAttribute("bb",'0'); } this.style.backgroundColor = "red"; this.getAttribute("bb",'1'); } } for(var i=0;i<aa.length;i++){ aa[i].onmouseover = function(){ this.style.backgroundColor = "#03F";} } for(var i=0;i<aa.length;i++){ aa[i].onmouseout = function(){ var bb = parsrInt(this.getAttribute("bb"));} if(bb==0){ this.backgroundColor = "#03F"; } else if(bb==1){ this.backgroundColor = "red"; } } </script> </html> <!--<script type="text/javascript"> var lizij = document.getElementsByClassName("lizi"); for(var i=0;i<lizij.length;i++){ lizij[i].onclick = function(){ for(var i=0;i<lizij.length;i++){ lizij[i].style.backgroundColor ="white"; } this.style.backgroundColor = "red"; var id = this.getAttribute("guanlian"); var nr = document.getElementsByClassName("neirong"); for(var i=0;i<nr.length;i++){ nr[i].style.display = "none"; } document.getElementById(id).style.display = "block"; } } </script>-->
