好友列表选中

好友列表选中：

<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{ width:200px; height:250px;}
.ss{ width: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>

效果图：

 

posted @ 2018-01-01 21:15  桃花灬仙人  阅读(89)  评论(0)  编辑  收藏  举报