列表选择背景变化

<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>
列表 选择背景变化

列表选择背景变化
