1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 li { list-style:none; width:114px; height:140px; background:url(img/normal.png); float:left; margin-right:20px; } 8 </style> 9 <script> 10 window.onload = function (){ 11 var aLi = document.getElementsByTagName('li'); 12 // var onOff = true; // 只能控制一组！ 13 14 for( var i=0; i<aLi.length; i++ ){ 15 16 aLi[i].onOff = true; 17 18 aLi[i].onclick = function (){ 19 20 // alert( this.style.background ); 21 // 背景不能判断 22 // color red #f00 23 // 相对路径 24 25 if ( this.onOff ) { 26 this.style.background = 'url(img/active.png)'; 27 this.onOff = false; 28 } else { 29 this.style.background = 'url(img/normal.png)'; 30 this.onOff = true; 31 } 32 }; 33 } 34 }; 35 </script> 36 </head> 37 38 <body> 39 40 <ul> 41 <li></li> 42 <li></li> 43 <li></li> 44 </ul> 45 46 </body> 47 </html>
思路：
首先找到所有的li元素，
然后给这里的li元素自定义属性值为true；//
var aLi = document.getElementsByTagName('li');
如何给他们每个li都添加true呢？ 就是使用for循环来实现；
// for( var i=0; i<aLi.length; i++ )
同时我们希望看到点击后产生一定的效果，所有这里需要一个点击事件，每个li都会有点击事件，所以有onclick这样一个事件
// 在循环体内：
aLi[i].onclick = function (){}
点击之后呢？点击之后我们来进行判断（所以需要if...else...语句）。如果判断结果是true执行相应的语言，然后改变其布尔值；用于下次判断；
其实从解决问题的思路来看，实际上应该是解决什么问题？问题就是希望点击li列表，产生不同的效果
那么如何产生不同的效果呢？通过判断
那通过什么来判断呢？通过布尔值，布尔值从何而来？ 从自定义属性而来
自定义属性如何添加？通过for循环
这样一个倒推的关系来催出解决方案；