JQuery 第五章事件和动画上机+课后

<!DOCTYPE html>
<html>
<head>
<title>sj1.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
	font-size: 12px;
}

#nav .navsBox {
	width: 160px;
}

#nav .navsBox .firstNav {
	height: 45px;
	line-height: 45px;
	background-color: #EBEBEB;
	border-left: 10px solid #FE705C;
	padding-left: 20px;
	width: 130px;
	font-weight: bold;
	cursor: pointer;
}

#nav .navsBox ul {
	display: none;
	list-style: none;
}

#nav .navsBox ul li {
	display: block;
	height: 45px;
	line-height: 45px;
	padding-left: 70px;
	width: 90px;
	background-color: #F2F2F2;
	background-position: 33px 7px;
	background-repeat: no-repeat;
}

#nav .navsBox ul li.jedh {
	background-image: url("./images/huan.gif");
}

#nav .navsBox ul li.jlbbyk {
	background-image: url("./images/you.gif");
}

#nav .navsBox ul li.jwljb {
	background-image: url("./images/gouwu.gif");
}

#nav .navsBox ul li.mrljb {
	background-image: url("./images/meiri.gif");
}

#nav .navsBox ul li.vipjtj {
	background-image: url("./images/zhe.gif");
}

#nav .navsBox ul li.onbg {
	background-color: #F9DBD1;
}

#nav .navsBox ul li a {
	color: #000;
	text-decoration: none;
}
</style>



<script type="text/javascript">
	$(document).ready(function() {
		$(".firstNav").click(function() {
			$("ul").css("display", "block");
			$("li").hover(function() {
				$(this).css("background-color", "pink");
			}, function() {
				$(this).css("background-color", "");
			});
		});

	});
</script>

</head>

<body>
	<div id="nav">
		<div class="navsBox">
			<div class="firstNav">购物特权</div>
			<ul>
				<li class="jedh"><a href="/go.html?url=#">全额兑换</a>
				</li>
				<li class="jlbbyk"><a href="/go.html?url=#">俱乐部包邮卡</a>
				</li>
				<li class="jwljb"><a href="/go.html?url=#">购物领金币</a>
				</li>
				<li class="mrljb"><a href="/go.html?url=#">每日领金币</a>
				</li>
				<li class="vipjtj"><a href="/go.html?url=#">VIP阶梯价</a>
				</li>
			</ul>
		</div>
	</div>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>s
JQuery 第五章 事件和动画 上机+课后

JQuery 第五章事件和动画上机+课后
