記錄一下:
<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>