首页 > 代码库 > 隔行换色

隔行换色

 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>

 

隔行换色