JS实例之列表选中，实现类似好友列表选中效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实例之列表选中，实现类似好友列表选中效果相关的知识，希望对你有一定的参考价值。
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>无标题文档</title> 4 <style type="text/css"> 5 *{margin:0px auto; padding:0px;} 6 #wai{width:100px; height:110px; margin-top:50px;} 7 .list{width:100px; height:20px; background-color:#999; text-align:center; line-height:20px; vertical-align:middle; margin:2px; color:#FFF;} 8 9 </style> 10 </head> 11 12 <body> 13 <div id="wai"> 14 <div class="list" onclick="dian(this)" onmouseover="show(this)" xz="0" onmouseout="huifu(this)">甲</div> 15 <div class="list" onclick="dian(this)" onmouseover="show(this)" xz="0" onmouseout="huifu(this)">乙</div> 16 <div class="list" onclick="dian(this)" onmouseover="show(this)" xz="0" onmouseout="huifu(this)">丙</div> 17 <div class="list" onclick="dian(this)" onmouseover="show(this)" xz="0" onmouseout="huifu(this)">丁</div> 18 <div class="list" onclick="dian(this)" onmouseover="show(this)" xz="0" onmouseout="huifu(this)">未</div> 19 </div> 20 21 </body> 22 <script type="text/javascript"> 23 function dian(a){ 24 var sy=document.getElementsByClassName("list"); 25 for(i=0;i<sy.length;i++){ 26 sy[i].style.backgroundColor ="#999"; 27 sy[i].style.color ="#FFF"; 28 sy[i].setAttribute("xz","0"); 29 } 30 a.style.backgroundColor ="white"; 31 a.style.color ="black"; 32 a.setAttribute("xz","1"); 33 } 34 function show(b){ 35 var sy=document.getElementsByClassName("list"); 36 for(i=0;i<sy.length;i++){ 37 if(sy[i].getAttribute("xz")=="0"){ 38 sy[i].style.backgroundColor ="#999"; 39 sy[i].style.color ="#FFF"; 40 } 41 } 42 b.style.backgroundColor ="white"; 43 b.style.color ="black"; 44 } 45 function huifu(){ 46 var sy=document.getElementsByClassName("list"); 47 for(i=0;i<sy.length;i++){ 48 if(sy[i].getAttribute("xz")=="0"){ 49 sy[i].style.backgroundColor ="#999"; 50 sy[i].style.color ="#FFF"; 51 } 52 } 53 } 54 </script> 55 </html>
以上是关于JS实例之列表选中，实现类似好友列表选中效果的主要内容，如果未能解决你的问题，请参考以下文章