<!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. WebBrowser控件默认使用IE9,IE10的方法

    1,打开注册表 HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER)     SOFTWARE        Microsoft           Internet E ...

  2. Chrome DevTools学习笔记

    ---恢复内容开始--- chrome和firefox的开发者工具大同小异,都非常强大.今天在博客园上看了这篇文章(http://www.cnblogs.com/Wayou/p/chrome-cons ...

  3. 继续畅通工程（kruskal prim）

    kruskal算法   #include <cstdio > #include <algorithm> using namespace std; const int MaxSi ...

  4. SRM 397(1-250pt)

    题意:对于一个长度n的数列(由1-n组成,n <= 8),每次操作可以reverse k个连续的数.问最少多少次操作可以将该数列转化成递增的数列. 解法:就是一个BFS.只是由于最开始学习BFS ...

  5. Searching the String - ZOJ 3228（ac自动机）

    题目大意:首先给你一下母串,长度不超过10^5,然后有 N(10^5) 次查询,每次查询有两种命令,0或者1,然后加一个子串,询问母串里面有多少个子串,0表示可以重复,1表示不可以重复.   分析:发 ...

  6. 那些年我用awk时踩过的坑——awk使用注意事项

    由于项目经历原因,经常使用awk处理一些文本数据.甚至,我特意下载了一个windows上的awk:gawk.exe,这样在windows上也能享受awk处理数据的方便性,. 俗话说,"常在河 ...

  7. Demo_CS(移动，切换枪支，发射子弹)

    using UnityEngine; using System.Collections; public class Gun : MonoBehaviour { private Animator ani ...

  8. JS 操作 HTML 自定义属性

    <input type="text" id="txtBox" displayName="123456" /> 获取自定义属性值: ...

  9. UVALIVE 4819 最大流

    题意:有N场比赛,每场比赛需要一定数量的题目数,现在有M个题目,每个题目只能提供给特定的几场比赛,并且一次只能在一场比赛中出现. 问最多可以举办多少场比赛. 思路:因为N = 15 , 所以直接二进制 ...

  10. 安全框架Shiro和Spring Security比较

    Shiro 首先Shiro较之 Spring Security,Shiro在保持强大功能的同时,还在简单性和灵活性方面拥有巨大优势. Shiro是一个强大而灵活的开源安全框架,能够非常清晰的处理认证. ...