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循环
这样一个倒推的关系来催出解决方案；
时间： 2024-11-07 14:33:53