<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>1-5-1</title>

 <style type="text/css">

 #menu{width:300px;margin-left:auto;margin-right:auto;}.has_children{background:#555;color:#fff;cursor:pointer;}.highlight{color:#fff;background:green;}

 div{padding:0;}

 div a{background:#888;display:none;float:left;width:300px;}

 </style>

 <!-- 引入 jQuery -->

 <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")            //为当前元素增加highlight类

             .children("a").show().end()            //将子节点的a元素显示出来并重新定位到上次操作的元素

         .siblings().removeClass("highlight")        //获取元素的兄弟元素，并去掉他们的highlight类

             .children("a").hide();                //将兄弟元素下的a元素隐藏

     });

 });

 </script>

 </head>

 <body>

 <div id="menu">

     <div class="has_children">

         <span>第1章-认识jQuery</span>

         <a>1.1-JavaScript和JavaScript库</a>

         <a>1.2-加入jQuery</a>

         <a>1.3-编写简单jQuery代码</a>

         <a>1.4-jQuery对象和DOM对象</a>

         <a>1.5-解决jQuery和其它库的冲突</a>

         <a>1.6-jQuery开发工具和插件</a>

         <a>1.7-小结</a>

     </div>

     <div class="has_children">

         <span>第2章-jQuery选择器</span>

         <a>2.1-jQuery选择器是什么</a>

         <a>2.2-jQuery选择器的优势</a>

         <a>2.3-jQuery选择器</a>

         <a>2.4-应用jQuery改写示例</a>

         <a>2.5-选择器中的一些注意事项</a>

         <a>2.6-案例研究——类似淘宝网品牌列表的效果</a>

         <a>2.7-还有其它选择器么？</a>

         <a>2.8-小结</a>

     </div>

     <div class="has_children">

         <span>第3章-jQuery中的DOM操作</span>

         <a>3.1-DOM操作的分类</a>

         <a>3.2-jQuery中的DOM操作</a>

         <a>3.3-案例研究——某网站超链接和图片提示效果</a>

         <a>3.4-小结</a>

     </div>

 </div>

 </body>

 </html>

jQuery简单导航示例的更多相关文章

  1. jquery简单ajax示例_读取json文件数据

    来自于<jquery权威指南> -------------------------------------- 点击button后,获取到json文件数据,显示如下: Json文件: [ { ...

  2. 简单的jquery左侧导航栏和页面选中

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...

  3. 30个实用的jQuery选项卡/导航教程推荐

    很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...

  4. jQuery Mobile 导航栏

    jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...

  5. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

  6. jQuery 顶部导航尾随滚动，固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  7. 如何构建ASP.NET MVC4&JQuery&AJax&JSon示例

    背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...

  8. html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...

  9. jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...

随机推荐

  1. Dinic 模板

    #include <iostream> #include <cstring> #include <cstdio> #include <queue> us ...

  2. [Sequence Alignment Methods] Dynamic time warping (DTW)

    本系列介绍几种序列对齐方法,包括Dynamic time warping (DTW),Smith–Waterman algorithm,Cross-recurrence plot Dynamic ti ...

  3. poj2393

    题目大意: 奶酪工厂 奶牛买了一个奶酪工厂制作全世界有名的Yucky酸奶,在接下来的N周(1<=N<=10000),牛奶的价格和工作将会受到波动例如他将花费C_i (1 <= C_i ...

  4. 使用Xcode8的Instruments检测解决iOS内存泄露（leak）

    在苹果没有出ARC(自动内存管理机制)时,我们几乎有一半的开发时间都耗费在这么管理内存上.后来苹果很人性的出了ARC,虽然在很大程度上,帮助我们开发者节省了精力和时间.但是我们在开发过程中,由于种种原 ...

  5. 缓存的概念（反向代理、CDN）

    缓存在我们的日常开发中随处可见,理解缓存的概念,本质就是就近处理,比如很多热点数据,访问量很多,我们需要使用,就可以把它 缓存起来,然后下次访问就不用再去数据库的去查询了,而是直接使用缓存,现在说说大 ...

  6. ASP.NET中Get和Post的用法

    单form的提交有两种方式,一种是get的方法,一种是post 的方法.看下面代码,理解ASP.NET Get和Post两种提交的区别: < form id="form1"  ...

  7. SPOJ 4053 - Card Sorting 最长不下降子序列

    我们的男主现在手中有n*c张牌,其中有c(<=4)种颜色,每种颜色有n(<=100)张,现在他要排序,首先把相同的颜色的牌放在一起,颜色相同的按照序号从小到大排序.现在他想要让牌的移动次数 ...

  8. ASP.NET过滤器、URL重写

    过滤器可以对指定的URL访问进行拦截,并执行过滤器的方法,根据实际应用情况,在过滤器中修改请求的代码.判断会话信息,也可以做权限控制. 一:编写过滤器,实现URL重写并配置过滤 编写过滤器,就是编写一 ...

  9. Python之路,Day8 - Socket编程进阶

    Python之路,Day8 - Socket编程进阶   本节内容: Socket语法及相关 SocketServer实现多并发 Socket语法及相关 socket概念 socket本质上就是在2台 ...

  10. codevs 3336 电话网络

    #include<iostream> #include<cstdio> #include<cstring> #include<queue> #defin ...