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>

查看全文

相关阅读:
touch测试
 JS动画代码
 前端css、javascript在线工具
 横向广告（商品）滚动
 写点js的小函数（一）
HTML5 css reset
JS新API标准地理定位（navigator.geolocation）
写点js的小函数（二、文本框的提示）
传说中的comet（ajax版）？
lhgdialog 4.2.0 正式版发布

原文地址：https://www.cnblogs.com/1358-com/p/6101431.html

列表 选择背景变化

列表选择背景变化