<!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> <style> li{ list-style-type: none; width: 114px; height: 140px; background: url('./normal.png'); margin-right: 20px; float:left; } </style> <script> window.onload = function(){ var aLi = document.getElementsByTagName('li'); //得到li元素 var onOff = true; //定义一个变量 for(var i=0;i<aLi.length;i++){ aLi[i].onOff = true; aLi[i].onclickr = function(){ if (onOff) { // 判断 this.style.background = "url(./active.png)"; //this 代表 aLi[i] onOff = false; //改变变量 }else{ this.style.background = "url(./normal.png)"; onOff = true; } }; } }; </script> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>