隔行换色 

 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>

 

posted @ 2016-08-28 17:38  舍近求猿  阅读(156)  评论(0)    收藏  举报