zoukankan      html  css  js  c++  java
  • 列表 选择背景变化

    <style type="text/css">
    *{ margin:0px auto; padding:0px}
    #wai{ 150px; height:300px;}
    .list{ 150px; height:40px; background-color:#66F; text-align:center; line-height:40px; vertical-align:middle; color:white; border:1px solid white;}
    .list:hover{ cursor:pointer; background-color:#F33}
    </style>
    </head>
    
    <body>
    <br />
    <div id="wai">
        <div class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">张三</div>
        <div class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">李四</div>
        <div class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">王五</div>
    </div>
    
    </body>
    
    <script type="text/javascript">
    
    function xuan(d)
    {
        //
        var list = document.getElementsByClassName("list");
        for(var i=0;i<list.length;i++)
        {
            list[i].removeAttribute("bs");
            list[i].style.backgroundColor = "#66F";
        }
        //
        d.setAttribute("bs",1);
        d.style.backgroundColor = "#F33";
    }
    
    function bian(d)
    {
        //
        var list = document.getElementsByClassName("list");
        for(var i=0;i<list.length;i++)
        {
            if(list[i].getAttribute("bs")!="1")
            {
                list[i].style.backgroundColor = "#66F";
            }
        }
        //
        d.style.backgroundColor = "#F33";
    }
    
    function huifu()
    {
        var list = document.getElementsByClassName("list");
        for(var i=0;i<list.length;i++)
        {
            if(list[i].getAttribute("bs")!="1")
            {
                list[i].style.backgroundColor = "#66F";
            }
        }
    }
    
    </script>
  • 相关阅读:
    .dll 无法查找或者打开PDB文件
    VC++中解决“在查找预编译头使用时跳过”的方法
    如何重置设置开发环境
    opencv与VS的配置
    supermap开发webgis的经验
    Json 与GeoJson
    地理配准
    DBMS
    C#三层构架
    重装系统简要步骤
  • 原文地址:https://www.cnblogs.com/1358-com/p/6101431.html
Copyright © 2011-2022 走看看