点击变色 

 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>111</li>
18         <li>222</li>
19         <li>333</li>
20         <li>444</li>
21         <li>555</li>
22         <li>666</li>
23         <li>777</li>
24         <li>888</li>
25         <li>999</li>
26         <li>000</li>
27     </ul>
28     <script>
29     var lis= document.getElementsByTagName("li");
30     for (var i = 0; i < lis.length; i++) {
31         lis[i].onclick=function() {        
32             for (var j = 0; j < lis.length; j++) {
33                 lis[j].style.background='#fff';
34             };
35             this.style.background='red';
36         };
37     };
38 
39     </script>
40 </body>
41 </html>

 

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