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>
  • 相关阅读:
    node.js抓取数据(fake小爬虫)
    认识mongoDB数据库
    node.js基础:数据存储
    mysql语句在node.js中的写法
    node.js基础:HTTP服务器
    node.js基础:模块的创建和引入
    认识node.js:express(一)
    认识Require
    认识Backbone (五)
    认识Backbone (四)
  • 原文地址:https://www.cnblogs.com/1358-com/p/6101431.html
Copyright © 2011-2022 走看看