jquery学习笔记第一章导航栏
2012-01-10 14:21
267 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style> #menu{width: 300px;} .has-children{background: #555;color: #fff; cursor: pointer;} .highlight{color: #fff;background: green;} div{padding:0px;margin:0px;} div a{background:#888;display: none;float:left; width: 300px;} </style> <script src="scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //等待dom元素加载完毕. $(document).ready(function(){ $(".has-children").click(function(){ $(this).addClass("highlight")//为当前元素增加lighlight类 .children("a").show().end()//将子节点的<a>元素显示出来并重新定位到上次操作的元素 .siblings().removeClass("highlight")//获取元素兄弟的元素,并去掉它们的highlight类 .children("a").hide();//将兄弟元素下的a元素隐藏 }); }); </script> </head> <body> <div id="menu"> <div class="has-children"> <span>第一章-认识Jquery</span> <a>1.1-JavaScript和JavaScript库</a> <a>1.2-加入jquery</a> <a>1.1-JavaScript和JavaScript库</a> <a>1.2-加入jquery</a> <a>1.1-JavaScript和JavaScript库</a> <a>1.2-加入jquery</a> </div> <div class="has-children"> <span>第二章-Jquery选择器</span> <a>1.1-JavaScript和JavaScript库</a> <a>1.2-加入jquery</a> <a>1.1-JavaScript和JavaScript库</a> <a>1.2-加入jquery</a> <a>1.1-JavaScript和JavaScript库</a> <a>1.2-加入jquery</a> </div> <div class="has-children"> <span>第三章-Jquery中的dom操作</span> <a>1.1-JavaScript和JavaScript库</a> <a>1.2-加入jquery</a> <a>1.1-JavaScript和JavaScript库</a> <a>1.2-加入jquery</a> <a>1.1-JavaScript和JavaScript库</a> <a>1.2-加入jquery</a> </div> </div> </body> </html>
代码运行效果如图:
相关文章推荐
- jquery学习笔记(1)-----简单导航栏
- 锋利的jQuery 学习笔记-第一章 认识JQuery
- 第一章 jquery开发入门 学习笔记
- Jquery学习笔记——第一章 Jquery入门及基础语法
- jquery插件开发学习笔记(四)——导航栏特效
- 第一章 jquery开发入门 学习笔记
- jQuery入门学习笔记----第一章 jQuery开发入门
- jQuery学习笔记
- 【TCP/IP详解 卷一:协议】第一章概论 学习笔记
- 前端学习笔记-jquery-14-表单元素选择器
- (一)数据库学习笔记 第一章 绪论
- jQuery学习笔记(2)---表格隔行变色
- 《TCPIP详解卷一》第一章学习笔记
- jQuery学习笔记--jqGrid的使用方法(编辑,删除,更新,新增)
- jquery学习笔记---this关键字
- SICP学习笔记 - 第一章 (1.2)
- 我的Jquery+Jason学习笔记
- jQuery学习笔记(二)
- jQuery 学习笔记 Working with Selections
- 第一章学习笔记