<!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. Delphi 重写控件的一个例子。

    unit DBGridEx;   interface   uses   Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, ...

  2. vector::erase returns incompatible iterator in debug build

    关于std::vector中erase的用法http://www.cplusplus.com/reference/vector/vector/erase/ #include <vector> ...

  3. 转载：c++ sort用法

    sort函数使用模板: sort包含在头文件algorithm中 sort(start,end,排序方法) 1.在没有排序方法时是默认从小到大的排列,例 #include<iostream> ...

  4. HDOJ 2188 悼念512汶川大地震遇难同胞——选拔志愿者

    Problem Description 对于四川同胞遭受的灾难,全国人民纷纷伸出援助之手,几乎每个省市都派出了大量的救援人员,这其中包括抢险救灾的武警部队,治疗和防疫的医护人员,以及进行心理疏导的心理 ...

  5. [Audio processing] FFMPEG转音频格式和采样率

    利用FFMPEG转音频格式和采样率 import os import string import subprocess as sp #Full path of ffmpeg FFMPEG_BIN = ...

  6. [Locked] Generalized Abbreviation

    Write a function to generate the generalized abbreviations of a word. Example:Given word = "wor ...

  7. Oracle数据库操作常见异常总结

    1.非法的sql语句结束符\n,抛 java.sql.SQLSyntaxErrorException: ORA-00911: 无效字符 实际就是在sql语句的结尾多了标点符号. 2.无效的序列 通常都 ...

  8. Rules

    我们之前处理异常的时候用到过Rules,当然还有很多其他规则.Rules允许弹性的添加或者重定义测试方法的行为.测试者可以重复使用或者扩展下面的某一个Rules,也可以写一个属于自己的规则. 这里先展 ...

  9. 【足迹C++primer】表达式求值

    表达式求值 /** * 功能:表达式求值(0到9) * 时间:2014年6月15日08:02:31 * 作者:cutter_point */ #include<stdlib.h> #inc ...

  10. 如何判断MSSQL数据库磁盘出现了瓶颈

    问大神石沫:如何判断MSSQL数据库磁盘出现了瓶颈? 石沫(A1):您好,您的问题非常好,SQL SERVER提供了很多关于I/O压力的性能计数器,请选择性能计算器PhysicalDisk(Logic ...