好友列表选中：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>好友列表选中</title> <style type="text/css"> *{margin:0px auto; padding:0px;} .aa{ 200px; height:250px;} .ss{ 200px; height:50px; background-color:#0F0; color:#003; text-align:center; line-height:50px; vertical-align:middle; margin-top:5px} .ss:hover{ background-color:#00F !important; color:#fff !important; cursor:pointer;} </style> </head> <body> <div class="aa"> <div class="ss">刘一</div> <div class="ss">陈二</div> <div class="ss">张三</div> <div class="ss">李四</div> <div class="ss">王五</div> </div> <script type="text/javascript"> var ss = document.getElementsByClassName("ss") for(var i=0;i<ss.length;i++) { ss[i].onclick = function() { for(var i=0;i<ss.length;i++) { ss[i].style.backgroundColor = "#0f0"; ss[i].style.color = "#003"; } this.style.backgroundColor = "#00f"; this.style.color = "#fff"; } } </script> </body> </html>
效果图：
