htmledit_views">
.html部分:
JqueryMenu.html源代码:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- < html >
- < head >
- < title > Jquery 实例2:弹出菜单</ title >
- < meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
- < link href ="css/menu.css" rel ="html" title=stylesheet>stylesheet" type ="text/css" />
- < script type ="text/javascript" src ="js/ html" title=jquery>jquery -1.3.2.js" > </ script >
- < script type ="text/javascript" src ="js/menu.js" > </ script >
- </ head >
- < body >
- < ul >
- < a href ="#" > 诗歌</ a >
- < li > < a href ="#" id ="a.html" > 乡愁(余光中)</ a > </ li >
- < li > < a href ="#" id ="b.html" > 赋得古原草送别(白居易)</ a > </ li >
- </ ul >
- < ul >
- < a href ="#" > 技术</ a >
- < li > < a href ="#" > Flex/AIR</ a > </ li >
- < li > < a href ="#" > Silverlight</ a > </ li >
- </ ul >
- < ul >
- < a href ="#" > 体育</ a >
- < li > < a href ="#" id ="a.html" > 足球(欧洲风云)</ a > </ li >
- < li > < a href ="#" id ="b.html" > 篮球(NBA战火)</ a > </ li >
- </ ul >
- < div id ="content" > </ div >
- </ body >
- </ html >
html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jquery
实例2:弹出菜单</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="css/menu.css" rel="html" title=stylesheet>stylesheet" type="text/css" />
<script type="text/javascript" src="js/html" title=jquery>jquery
-1.3.2.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<ul>
<a href="#">诗歌</a>
<li><a href="#" id="a.html">乡愁(余光中)</a></li>
<li><a href="#" id="b.html">赋得古原草送别(白居易)</a></li>
</ul>
<ul>
<a href="#">技术</a>
<li><a href="#">Flex/AIR</a></li>
<li><a href="#">Silverlight</a></li>
</ul>
<ul>
<a href="#">体育</a>
<li><a href="#" id="a.html">足球(欧洲风云)</a></li>
<li><a href="#" id="b.html">篮球(NBA战火)</a></li>
</ul>
<div id="content"></div>
</body>
</html>
2.css代码
menu.js源代码:
- /*让所有li的小圆点都不显示,可以使用css的标签选择器*/
- li {
- /*让li前面的小圆点消失*/
- list-style: none;
- /*让子菜单向右移动一段距离,达到缩进的效果*/
- margin-left: 15px;
- /*让所有的子菜单都不显示*/
- display: none;
- }
- a {
- /*让链接的下划线消失*/
- text-decoration: none;
- }
3.JavaScript代码:
menu.js源代码:
- //需要点击主菜单的按钮时,对应的子菜单可以显示,再次点击子菜单则隐藏
- //需要编写代码时,在页面加载时,让所有的主菜单添加onclick事件
- //保证主菜单点击时可以显示或者隐藏子菜单
- //注册页面装载时执行的方法
- $(document).ready(html" title=function>function () {
- //这里首先需要找到所有的主菜单
- //然后给所有的主菜单注册点击事件
- var as = $("ul > a" );
- as.click(html" title=function>function () {
- //这里需要找到当前的ul中的li,然后让li显示出来
- //获取当前被点击的ul节点
- var ulNode = $(this );
- //找到当前a节点的所有li兄弟子结点
- var lis = ulNode.nextAll("li" );
- //让子菜单显示或隐藏
- lis.toggle("slow" );
- //局部刷新
- $("li > a" ).click(html" title=function>function () {
- $("#content" ).load($(this ).attr("id" ));
- });
- });
- });
ok,代码已经贴完,现在我们看一看效果图吧。