例子：好友列表选中效果

Posted 2020-08-10 带你疯

<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" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">张三</div>    

<div class="f" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">李四</div>    

<div class="f" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">王五</div>    

<div class="f" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">赵六</div>    

<div class="f" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="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>