<%@ 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. Eclipse(Myeclipse)安装GoogleGWT

    1,下载gpe http://code.google.com/p/googleappengine/并安装. 2,下载gwt http://code.google.com/intl/zh-CN/webt ...

  2. 基于XMPP实现的Openfire的配置安装+Android客户端的实现[转]

    最近在整理一些这方面的资料,闲话少说,咱还是直奔主题吧 :) http://blog.csdn.net/sk719887916/article/details/40541163 https://git ...

  3. java继承分析

    把java学完之后有開始了一遍突然发现对于继承还是不太理解所以就做了一个測试来分析一下 <span style="font-size:18px;">class A{ p ...

  4. android 29 ArrarAdapter数组适配器

    package com.sxt.day05_03; import android.os.Bundle; import android.app.Activity; import android.view ...

  5. php 总结

    1.安装完apache之后 2.有一个目录 htdocs 下面就是根目录了 3.测试一下,新建一个index.html 写入 it works  .输入localhost 看是否显示 it works ...

  6. 使用SqlAlchemy时如何方便的取得dict数据、dumps成Json

    使用Sqlalchemy可以方便的从数据库读取出python对象形式的数据(吐槽:说实话对象形式也没多方便,还不如我之前从关系型数据库直接读取出dict形式的数据用起来方便,具体参见我以前的文章htt ...

  7. 兼容IE浏览器的placeholder【超不错】

    jQuery EnPlaceholder plug (兼容IE浏览器的placeholder)使用 >>>>>>>>>>>>&g ...

  8. 10.7 noip模拟试题

    楼[问题背景]zhx 为他的妹子造了一幢摩天楼.[问题描述]zhx 有一幢摩天楼. 摩天楼上面有 M 个观光电梯,每个观光电梯被两个整数

  9. （转）Linux内核之进程和系统调用

    Linux内核之进程和系统调用 什么是系统调用 在Linux的世界里,我们经常会遇到系统调用这一术语,所谓系统调用,就是内核提供的.功能十分强大的一系列的函数.这些系统调用是在内核中实现的,再通过一定 ...

  10. apk文件解析，学习笔记

    Android 应用程序包文件 (APK) 是一种Android操作系统上的应用程序安装文件格式,其英文全称为 “application package file” . 如果懂得使用反编译工具,可以下 ...