jquery鼠标点击改变控件的背景颜色

时间：2025-03-09 22:35:45

记录一下：

<script type="text/javascript">
    $(function () {
        //初始化控件，并注册事件
        var clickItem = function () {
            $(".itemID 子控件名称").css("background", "");
            $(".itemID 子控件名称").mouseover(function () {
                $(this).css("background", "#588600");
            })
                .mouseout(function () {
                    $(this).css("background", "");
                })
        };
        clickItem();
        $(".itemID 子控件名称").click(function () {
                clickItem();
                //当前被点击的控件改变背景色
                $(this).css("background", "#588600");
                //取消当前控件的mouseout和mouseover事件
                $(this).unbind("mouseout");
                $(this).unbind("mouseover");
            });
    })
</script>



完整代码：

<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{: get_title()}</title>
<link rel="stylesheet" type="text/css" href="__CSS__/" />
<script type="text/javascript" src="__JS__/"></script>
<script type="text/javascript">
$(function(){
    var initLi = function () {
            $(".u_menu ul li").css("background", "");
            $(".u_menu ul li").mouseover(function () {
                $(this).css("background", "#eee");
            })
                .mouseout(function () {
                    $(this).css("background", "");
                })
        };
        initLi();
        $(".u_menu ul li").click(function () {
                initLi();
                //当前被点击的控件改变背景色
                $(this).css("background", "#eee");
                //取消当前控件的mouseout和mouseover事件
                $(this).unbind("mouseout");
                $(this).unbind("mouseover");
            });
})
</script>
</head>
<body>
<div >
        <div  class="u_menu">
            <ul>
                <li><a href="javascript:0;">基本信息</a></li>
                <li>修改密码</li>
                <li>个人订单</li>
            </ul>
        </div>
   </div>
</div> 
</body>
</html>


相关文章