学习《锋利的jQuery》-1

近期在看这本书，顺便把相应的代码粘上来。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>1-5-1</title>
	<style type="text/css">
		#menu { width:300px; }
		.has_children { background: #555; color:#fff; cursor:pointer; }
		.highlight { color:#fff; background:green; }
		div { padding:0; margin:10px 0; }
		div a { background:#888; display:none; float:left; width:300px; }
	</style>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
	$(function () {
		$(".has_children").click(function (){
				$(this).addClass("highlight")
					.children("a").show().end()
				.siblings().removeClass("highlight")
					.children("a").hide();
			} // ef click
		);
	});
	</script>
</head>
<body>
<div id="menu">
	<div class="has_children">
		<span>Pattern 1</span>
		<a href="">1.1-JavaScript-Lib</a>
		<a href="">1.2-JavaScript-Lib</a>
		<a href="">1.3-JavaScript-Lib</a>
		<a href="">1.4-JavaScript-Lib</a>
		<a href="">1.5-JavaScript-Lib</a>
	</div>
	<div class="has_children">
		<span>Pattern 2</span>
		<a href="">1.1-JavaScript-Lib</a>
		<a href="">1.2-JavaScript-Lib</a>
		<a href="">1.3-JavaScript-Lib</a>
		<a href="">1.4-JavaScript-Lib</a>
		<a href="">1.5-JavaScript-Lib</a>
	</div>
	<div class="has_children">
		<span>Pattern 3</span>
		<a href="">1.1-JavaScript-Lib</a>
		<a href="">1.2-JavaScript-Lib</a>
		<a href="">1.3-JavaScript-Lib</a>
		<a href="">1.4-JavaScript-Lib</a>
		<a href="">1.5-JavaScript-Lib</a>
	</div>
</div>
</body>
</html>
posted @ 1970-01-01 08:00  wangchao719  阅读(136)  评论(0)    收藏  举报