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>
  • 相关阅读:
    appium 搭建及实例
    appium运行时每次默认弹出appiumsetting与unlock重装,关闭这两个步骤的方法
    APPIUM
    分析DuxCms之AdminController
    分析DuxCms之AdminUserModel
    THINKPHP 调试------输出sql语句
    html 标签内联元素和块元素分类【转】
    thinkphp实现数据分页
    thinkphp框架实现删除上传的文件
    初入thinkphp
  • 原文地址:https://www.cnblogs.com/1358-com/p/6101431.html
Copyright © 2011-2022 走看看