天天看點

jquery滑鼠點選改變控件的背景顔色

記錄一下:

<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://www.w3.org/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__/style.css" target="_blank" rel="external nofollow"  />
<script type="text/javascript" src="__JS__/jquery.min.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 id="main_container">
        <div id="u_menu" class="u_menu">
            <ul>
                <li><a href="javascript:0;" target="_blank" rel="external nofollow" >基本資訊</a></li>
                <li>修改密碼</li>
                <li>個人訂單</li>
            </ul>
        </div>
   </div>
</div> 
</body>
</html>