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循环
这样一个倒推的关系来催出解决方案;