1 <head>
2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
3 <title>无标题文档</title>
4 <style type="text/css">
5 *{margin:0px auto; padding:0px;}
6 #wai{width:100px; height:110px; margin-top:50px;}
7 .list{width:100px; height:20px; background-color:#999; text-align:center; line-height:20px; vertical-align:middle; margin:2px; color:#FFF;}
8
9 </style>
10 </head>
11
12 <body>
13 <div id="wai">
14 <div class="list" onclick="dian(this)" onmouseover="show(this)" xz="0" onmouseout="huifu(this)">甲</div>
15 <div class="list" onclick="dian(this)" onmouseover="show(this)" xz="0" onmouseout="huifu(this)">乙</div>
16 <div class="list" onclick="dian(this)" onmouseover="show(this)" xz="0" onmouseout="huifu(this)">丙</div>
17 <div class="list" onclick="dian(this)" onmouseover="show(this)" xz="0" onmouseout="huifu(this)">丁</div>
18 <div class="list" onclick="dian(this)" onmouseover="show(this)" xz="0" onmouseout="huifu(this)">未</div>
19 </div>
20
21 </body>
22 <script type="text/javascript">
23 function dian(a){
24 var sy=document.getElementsByClassName("list");
25 for(i=0;i<sy.length;i++){
26 sy[i].style.backgroundColor ="#999";
27 sy[i].style.color ="#FFF";
28 sy[i].setAttribute("xz","0");
29 }
30 a.style.backgroundColor ="white";
31 a.style.color ="black";
32 a.setAttribute("xz","1");
33 }
34 function show(b){
35 var sy=document.getElementsByClassName("list");
36 for(i=0;i<sy.length;i++){
37 if(sy[i].getAttribute("xz")=="0"){
38 sy[i].style.backgroundColor ="#999";
39 sy[i].style.color ="#FFF";
40 }
41 }
42 b.style.backgroundColor ="white";
43 b.style.color ="black";
44 }
45 function huifu(){
46 var sy=document.getElementsByClassName("list");
47 for(i=0;i<sy.length;i++){
48 if(sy[i].getAttribute("xz")=="0"){
49 sy[i].style.backgroundColor ="#999";
50 sy[i].style.color ="#FFF";
51 }
52 }
53 }
54 </script>
55 </html>
