1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html>
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  <title>1-5-1</title>
  6.  <style type="text/css">
  7.  #menu{width:300px;margin-left:auto;margin-right:auto;}.has_children{background:#555;color:#fff;cursor:pointer;}.highlight{color:#fff;background:green;}
  8.  div{padding:0;}
  9.  div a{background:#888;display:none;float:left;width:300px;}
  10.  </style>
  11.  <!-- 引入 jQuery -->
  12.  <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  13.  <script type="text/javascript">
  14.  //等待dom元素加载完毕.
  15.  $(document).ready(function(){
  16.      $(".has_children").click(function(){
  17.          $(this).addClass("highlight")            //为当前元素增加highlight类
  18.              .children("a").show().end()            //将子节点的a元素显示出来并重新定位到上次操作的元素
  19.          .siblings().removeClass("highlight")        //获取元素的兄弟元素，并去掉他们的highlight类
  20.              .children("a").hide();                //将兄弟元素下的a元素隐藏
  21.      });
  22.  });
  23.  </script>
  24.  </head>
  25.  <body>
  26.  <div id="menu">
  27.      <div class="has_children">
  28.          <span>第1章-认识jQuery</span>
  29.          <a>1.1-JavaScript和JavaScript库</a>
  30.          <a>1.2-加入jQuery</a>
  31.          <a>1.3-编写简单jQuery代码</a>
  32.          <a>1.4-jQuery对象和DOM对象</a>
  33.          <a>1.5-解决jQuery和其它库的冲突</a>
  34.          <a>1.6-jQuery开发工具和插件</a>
  35.          <a>1.7-小结</a>
  36.      </div>
  37.      <div class="has_children">
  38.          <span>第2章-jQuery选择器</span>
  39.          <a>2.1-jQuery选择器是什么</a>
  40.          <a>2.2-jQuery选择器的优势</a>
  41.          <a>2.3-jQuery选择器</a>
  42.          <a>2.4-应用jQuery改写示例</a>
  43.          <a>2.5-选择器中的一些注意事项</a>
  44.          <a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
  45.          <a>2.7-还有其它选择器么？</a>
  46.          <a>2.8-小结</a>
  47.      </div>
  48.      <div class="has_children">
  49.          <span>第3章-jQuery中的DOM操作</span>
  50.          <a>3.1-DOM操作的分类</a>
  51.          <a>3.2-jQuery中的DOM操作</a>
  52.          <a>3.3-案例研究——某网站超链接和图片提示效果</a>
  53.          <a>3.4-小结</a>
  54.      </div>
  55.  </div>
  56.  </body>
  57.  </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. hihoCoder 1391 Countries 【预处理+排序+堆】 (ACM-ICPC国际大学生程序设计竞赛北京赛区(2016)网络赛)

    #1391 : Countries 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 There are two antagonistic countries, countr ...

  2. HDOJ(HDU) 2309 ICPC Score Totalizer Software(求平均值)

    Problem Description The International Clown and Pierrot Competition (ICPC), is one of the most disti ...

  3. Java中的数据类型及相互转换方法

    本文主要讲解两个部分: 一.Java中的数据类型有哪些? 二.数字类型和字符串类型相互转换的方法? 一.Java中的数据类型有哪些: Java中的数据类型有:基本数据类型和引用数据类型: 基本数据类型 ...

  4. 《A First Course in Probability》-chaper3-条件概率和独立性-贝叶斯公式、全概率公式

    设有事件A.B. 下面结合具体的题目进一步理解这种方法: Q1:保险公司认为人可以分为两类,一类易出事故,另一类则不易出事故.统计表明,一个易出事故者在一年内发生事故的概率是0.4,而对不易出事故者来 ...

  5. J2EE 关于WebLogic下应用使用URL.openConnection获取连接返回 HttpsURLConnection与SOAPHttpsURLConnection的问题

    J2EE 关于WebLogic下应用使用URL.openConnection获取连接返回 HttpsURLConnection与SOAPHttpsURLConnection的问题 2012年03月09 ...

  6. python环境配置selenium与IE、Chrome、Firefox、PhantomJS

    安装.升级selenium pip install -U selenium 下载对应平台最新版的browser driver chrome: http://chromedriver.storage.g ...

  7. 常用的Linux操作一

    Linux 常用的操作必须明白. 1.ls  和ll 列出文件的目录. 2.tail -f XXX  查看文件. 3.chmod -R 777 XXX.jar 赋予权限 4.cat 查看文件 -n 对 ...

  8. ViewPager切换大量Fragment不刷新的问题

    PagerAdapter,需要重写instantiateItem()加载视图,onDestroy()销毁视图FragmentPagerAdapter,每一个生成的Fargment都保存在内存中,也就是 ...

  9. android圆角View实现及不同版本这间的兼容

    在做我们自己的APP的时候,为了让APP看起来更加的好看,我们就需要将我们的自己的View做成圆角的,毕竟主流也是将很多东西做成圆角,和苹果的外观看起来差不多,看起来也还不错. 要将一个View做成圆 ...

  10. iOS中sqlite3操作

    声明:下面命令我没有所有使用过, 仅用于收藏, 欢迎大家指出当中的错误 'SELECT  count(*)   FROM sqlite_master WHERE type="table&qu ...