<!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. 网络流(最大流) CQOI 2015 BZOJ 3931 网络吞吐量

    3931: [CQOI2015]网络吞吐量 Description 路由是指通过计算机网络把信息从源地址传输到目的地址的活 动,也是计算机网络设计中的重点和难点.网络中实现路由转发的硬件设备称为路由器 ...

  2. Summary Ranges —— LeetCode

    Given a sorted integer array without duplicates, return the summary of its ranges. For example, give ...

  3. stl中的空间配置器

    一般我们习惯的c++内存配置如下 class Foo { ... }; Foo* pf = new Foo; delete pf; 这里的new实际上分为两部分执行.首先是先用::operator n ...

  4. 迭代加深搜索算法总结 + Editing a Book UVa11212题解

    迭代加深搜索算法: 对于可以用回溯法解决,但是解答树结点数大的恐怖的问题的一种解决办法,有的问题甚至用bfs连一层节点都遍历不完就超时了.具体方法就是依次枚举搜索层数,从1到一个上限. 结构: int ...

  5. N - Tram - poj1847（简单最短路）

    题意:火车从一点开到另一点,轨道上有很多岔路口,每个路口都有好几个方向(火车能够选任意一个方向开),但是 默认的是 第一个指向的方向,所以如果要选择别的方向的话得 进行一次切换操作 ,给定一个起点一个 ...

  6. poj1006

    题目大意:生物节律 一些人相信有三种循环在一个人生命中从他或者她出生的那天起,这个三个周期是,身体,情绪,智力, 并且他们有23,28,和33天的时间,在每一个周期里面都有一个周期,在一个周期的高峰期 ...

  7. Beautiful Numbers

    http://codeforces.com/problemset/problem/300/C 题意:给你三个数a,b,n;求满足由a,b组成的n位的个数,且每个位置上的数之和也是用a,b组成; 解析: ...

  8. 学习AngularJs:Directive指令用法

    跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...

  9. Sublime编辑器 前端 必备插件

    sublime编辑器前端必备插件 下面这一行是Package Control包安装,它是sublime的插件包管理器.新安装的sublime 里没有Package Control,按一下ctrl+~, ...

  10. A_star poj2449 k短路

    赛后填坑系列QAQ 贴代码呀 #include<iostream> #include<algorithm> #include<cstdio> #include< ...