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实例之列表选中,实现类似好友列表选中效果的主要内容,如果未能解决你的问题,请参考以下文章

使用Vue.js实现列表选中效果

鼠标事件和表单事件+好友列表选中效果+侧面菜单下拉效果

例子:好友列表选中效果

好友列表选中

好友列表选中

js如何实现点击导航栏后相应导航栏实现选中效果的切换