<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<html>

<head>

<script type="text/javascript" src="jQuery.js"></script>

</head>

<title>

</title>

    <style type="text/css">

        #menu {width:300px;}

        .hasChildren {background:#555;color:#fff;sursor:pointer;}

        .hightLight  {color: #fff; background:green;}

        div{padding:0;margin:10px 0;}

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

    </style>

<body>

    <script type="text/javascript">

    $(document).ready(

       function(){

        $(".hasChildren").click(

            function()

            {

                $(this).addClass("hightLight");

                $(this).children("a").show();

                $(this).siblings().removeClass("hightLight");

                $(this).siblings().children("a").hide();

            }

         );

    });

    </script>

    <div id="menu">

        <div class="hasChildren">

            <span>第一章</span>

            <a>---第一节</a>

            <a>---第二节</a>

        </div>

        <div class="hasChildren">

            <span>第二章</span>

            <a>---第一节</a>

            <a>---第二节</a>

        </div>

    </div>

</body>

</html>

jquery的几个小例子的更多相关文章

  1. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  2. bootstrap 模态 modal 小例子

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  3. 【zTree】 zTree使用的 小例子

    使用zTree树不是第一次了  但是 还是翻阅着之前做的 对照着 使用起来比较方便  这里就把小例子列出来   总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先  在 ...

  4. bootstrap 模态 modal 小例子【转】

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  5. springmvc入门的第一个小例子

    今天我们探讨一下springmvc,由于是初学,所以简单的了解一下 springmvc的流程,后续会持续更新... 由一个小例子来简单的了解一下 springmvc springmvc是spring框 ...

  6. java即时通信小例子

    学习java一段时间了,今天写来一个即时通信的小例子练手在其过程中也学到了一些知识拿出来和大家分享,请路过的各位大神多多赐教... 好了下面讲一下基本的思路: 首先,编写服务器端的程序,简单点说吧就是 ...

  7. Runtime的几个小例子（含Demo）

    一.什么是runtime(也就是所谓的“运行时”,因为是在运行时实现的.)           1.runtime是一套底层的c语言API(包括很多强大实用的c语言类型,c语言函数);  [runti ...

  8. INI配置文件分析小例子

    随手写个解析INI配置字符串的小例子 带测试 #include <iostream> #include <map> #include <string> #inclu ...

  9. JavaScript小例子：复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

随机推荐

  1. Tomcat工作原理(转)

    Tomcat简介 作者:杨晓(http://blog.sina.com.cn/u/1237288325) 一.Tomcat背景 自从JSP发布之后,推出了各式各样的JSP引擎.Apache Group ...

  2. 经典SQL语句大全之基础

    一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname 3.说明:备份sql server--- 创建 ...

  3. ExtJs4学习（四）：Extjs 中id与itemId的差别

       为了方便表示或是指定一个组件的名称,我们一般会使用id或者itemId进行标识命名. (推荐尽量使用itemId.这样能够降低页面唯一标识而产生的冲突) id:   id是作为整个页面的Comp ...

  4. linux device driver —— ioctl

    实现了应用程序和设备驱动通过ioctl通信.还是对设备驱动没什么感觉,贴一下代码吧. 在Ubuntu 16.04 64bit中测试通过 ioctldemo.c #include <linux/m ...

  5. Android应用发布后的统计——百度移动统计的应用

    一个App发布到各个渠道之后,我们需要采集不同渠道的一些信息,比如app在运行过程中产生的一些异常信息,app在各个android版本的分布,以及各个app版本的分布,各渠道的用户数,用户忠诚度等等信 ...

  6. git 删除远程master 分支

    ➜  fekit-extension-yo git:(dev) git push origin :master remote: error: By default, deleting the curr ...

  7. label_设置行距、字距及计算含有行间距的label高度

    // //  ViewController.m //  CNBlogs // //  Created by PXJ on 16/5/27. //  Copyright © 2016年 PXJ. All ...

  8. 17、SQL Server 备份和还原

    SQL Server 备份 恢复模式 SQL Server 数据恢复模式分为三种:完整恢复模式.大容量日志恢复模式.简单恢复模式. 完整恢复模式 默认的恢复模式,它会完整记录下操作数据库的每一个步骤, ...

  9. Java_Activiti5_菜鸟也来学Activiti5工作流_之初识BPMN2.0的简单结构（五）

    <?xml version="1.0" encoding="UTF-8"?> <definitions xmlns="http:// ...

  10. 项目中常用SQL语句总结

    1.项目中常常需要修改字段长度,但需要保留数据--增加业务受理 项目名称 字段长度alter table t_ywsl add aa varchar2(200);update t_ywsl set a ...