C#-WebForm-光棒效果

<script type="text/javascript">
    //获取Repeater的每一行
    var oItems = document.getElementsByClassName("item");
    
    //循环为每一行绑定事件
    for (var i = 0; i < oItems.length; i++) {
        //鼠标悬浮时判断背景色
        oItems[i].onmouseover = function () {
            if (this.style.backgroundColor == "white")
                this.style.backgroundColor = "yellow";
        };
        
        //鼠标移除时判断背景色
        oItems[i].onmouseout = function () {
            if (this.style.backgroundColor == "yellow") {
                this.style.backgroundColor = "white";
            }
        };

        //点击时事件
        oItems[i].onclick = function () {
            //将所有行背景色变为白色
            for (var j = 0; j < oItems.length; j++) {
                oItems[j].style.backgroundColor = "white";
            }
            //将点击的行背景色变为红色
            this.style.backgroundColor = "red";
        };
    }
    
</script>
posted @ 2017-02-10 08:46  野性狼心  阅读(369)  评论(0编辑  收藏  举报