<style type="text/css">

*{ margin:0px auto; padding:0px; font-family:微软雅黑; font-size:16px;}

.f{ width:200px; height:30px; background-color:#63C; color:white; text-align:center; line-height:30px; vertical-align:middle; margin-top:3px}

.f:hover{ cursor:pointer;}

</style>

 

<div style="width:200px; height:600px; margin-top:30px">      

<div class="f" οnclick="Xuan(this)" οnmοuseοver="Bian(this)" οnmοuseοut="Hui(this)" xz="0">张三</div>    

<div class="f" οnclick="Xuan(this)" οnmοuseοver="Bian(this)" οnmοuseοut="Hui(this)" xz="0">李四</div>    

<div class="f" οnclick="Xuan(this)" οnmοuseοver="Bian(this)" οnmοuseοut="Hui(this)" xz="0">王五</div>    

<div class="f" οnclick="Xuan(this)" οnmοuseοver="Bian(this)" οnmοuseοut="Hui(this)" xz="0">赵六</div>    

<div class="f" οnclick="Xuan(this)" οnmοuseοver="Bian(this)" οnmοuseοut="Hui(this)" xz="0">马七</div>    

</div>

 

<script type="text/javascript">

 

 function Xuan(a)

 {

  var attr = document.getElementsByClassName("f");

  

  for(var i=0;i<attr.length;i++)

  {

   attr[i].style.backgroundColor = "#63C";

   attr[i].setAttribute("xz","0");

  }

  a.setAttribute("xz","1");

  a.style.backgroundColor = "#F63";

 }

 

 function Bian(a)

 {

  var attr = document.getElementsByClassName("f");

  

  for(var i=0;i<attr.length;i++)

  {

   if(attr[i].getAttribute("xz")=="0")

   {

    attr[i].style.backgroundColor = "#63C";

   }

  }

  

  a.style.backgroundColor = "#F63";

 }

 

 

 function Hui(a)

 {

  var attr = document.getElementsByClassName("f");

  

  for(var i=0;i<attr.length;i++)

  {

   if(attr[i].getAttribute("xz")=="0")

   {

    attr[i].style.backgroundColor = "#63C";

   }

  }

 }

 

</script>