zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    python的垃圾回收机制
    生成器
    装饰器
    模块与包
    MES实施会有哪些情况?为你介绍两种常见的类型
    中国智慧工厂未来发展及趋势几何?这里给你讲个清楚
    未来智能工厂是什么样?这五种产业必不可少
    制造企业非常头疼的插单问题,本文给你这些实用建议,第7点最具价值
    MES选型很困惑?避开这三个禁忌!
    如何适应应用场景?高级排程系统的功能如此强大!
  • 原文地址:https://www.cnblogs.com/zym0m/p/7067067.html
Copyright © 2011-2022 走看看