1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 *{margin: 0;padding:0;}
8 li{
9 width: 500px;
10 height: 50px;
11 border:1px solid black;
12 }
13 </style>
14 </head>
15 <body>
16 <ul>
17 <li></li>
18 <li></li>
19 <li></li>
20 <li></li>
21 <li></li>
22 <li></li>
23 <li></li>
24 <li></li>
25 <li></li>
26 <li></li>
27 </ul>
28
29
30 <script>
31 var lis= document.getElementsByTagName("li");
32 for(var i=0;i<lis.length;i++){
33 if(i%2==0){
34 lis[i].onclick = function(){
35 for (var j = 0; j < lis.length; j++) {
36 lis[j].style.background='#fff';
37 };
38 this.style.background = "red";
39 }
40 }else{
41 lis[i].onclick = function(){
42 for (var j = 0; j < lis.length; j++) {
43 lis[j].style.background='#fff';
44 };
45 this.style.background = "gray";
46 }
47 }
48 }
49
50
51 </script>
52 </body>
53 </html>
