首页 > 代码库 > JS实例之列表选中，实现类似好友列表选中效果

JS实例之列表选中，实现类似好友列表选中效果

2024-10-10 09:07:39   219人阅读

 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)" onm ouseover="show(this)" xz="0" onm ouseout="huifu(this)">甲</div>
15         <div class="list" onclick="dian(this)" onm ouseover="show(this)" xz="0" onm ouseout="huifu(this)">乙</div>
16         <div class="list" onclick="dian(this)" onm ouseover="show(this)" xz="0" onm ouseout="huifu(this)">丙</div>
17         <div class="list" onclick="dian(this)" onm ouseover="show(this)" xz="0" onm ouseout="huifu(this)">丁</div>
18         <div class="list" onclick="dian(this)" onm ouseover="show(this)" xz="0" onm ouseout="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实例之列表选中，实现类似好友列表选中效果


联系
我们