1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
*{ margin:0px auto;
   padding:0px;}
 
.tian{ width:300px;
       height:50px;
       text-align:center;
       line-height:50px;
       vertical-align:middle;
       border:1px solid #F00;
       margin-top:20px;
       background-color:blue;}
.tian:hover{ cursor:pointer;}
</style>

  

1
2
3
4
5
6
7
8
9
10
body>
   <div>
   <div class="tian"  onmouseover="bian(this)" onmouseout="se(this)" onclick="xuan(this)" xz="0">好</div>
   <div class="tian"  onmouseover="bian(this)" onmouseout="se(this)" onclick="xuan(this)" xz="0">友</div>
   <div class="tian"  onmouseover="bian(this)" onmouseout="se(this)" onclick="xuan(this)" xz="0">列</div>
   <div class="tian"  onmouseover="bian(this)" onmouseout="se(this)" onclick="xuan(this)" xz="0">表</div>
   <div class="tian"  onmouseover="bian(this)" onmouseout="se(this)" onclick="xuan(this)" xz="0">选</div>
   <div class="tian"  onmouseover="bian(this)" onmouseout="se(this)" onclick="xuan(this)" xz="0">中</div>
   </div>
</body>

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script type="text/javascript">
 
 function bian(a){
     var sy = document.getElementsByClassName("tian");
       for (var i=0;i<sy.length;i++){
           if(sy[i].getAttribute("xz")=="0"){
              sy[i].style.backgroundColor = "blue";}
       }
        a.style.backgroundColor = "red";
      
     
 function se(b){
     var sy = document.getElementsByClassName("tian");
       for (var i=0;i<sy.length;i++){
           if(sy[i].getAttribute("xz")=="0"){
              sy[i].style.backgroundColor = "blue";}
       }
     b.style.backgroundColor = "red";
     }
 
 function xuan(c){
      
 
    var d = document.getElementsByClassName("tian");
    for(var i=0;i<d.length;i++){
        d[i].style.backgroundColor = "blue";
        d[i].setAttribute("xz","0");
    }
     
    c.style.backgroundColor = "red";
    c.setAttribute("xz","1");
    }
</script>