左侧菜单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title>Title</title>

    <style>

          .header{

            background-color: black;

            color: wheat;

        }

        .content{

            min-height: 50px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

<div style="height:400px;width: 200px;border: 1px solid #dddddd">

        <div class="item">

            <div class="header">标题一</div>

            <div id="i1" class="content hide">内容</div>

        </div>

        <div class="item">

            <div class="header">标题二</div>

            <div class="content hide">内容</div>

        </div>

        <div class="item">

            <div class="header">标题三</div>

            <div class="content hide">内容</div>

        </div>

    </div>

<script src="jquery-1.12.4.js"></script>

<script>

    $(".header").click(function () {

        $(this).next().removeClass('hide').parent().siblings().find(".content").addClass("hide")

//next获取下一个标签

    })

</script>

</body>

</html>

左侧菜单

python : jquery实现左侧菜单的更多相关文章

  1. python : HTML+CSS (左侧菜单)

    左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  2. jquery实现左侧菜单 效果

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  3. JQuery之左侧菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. jquery左侧菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

    关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...

  6. python :页面布局 ，后台管理页面之左侧菜单跟着滚动条动

    左侧菜单跟着滚动条动 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...

  7. jquery实现全选，取消，反选的功能&实现左侧菜单

    1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  8. 使用layui-tree美化左侧菜单，点击生成tab选项

    layui-tree美化左侧菜单 html <div class="layui-side layui-bg-black"> <div class="la ...

  9. python jquery

    jquery 一.寻找元素(选择器和筛选器) a.选择器 1.基本选择器 1 $("*")  $("#id")   $(".class")  ...

随机推荐

  1. [转载]对于GetBuffer() 与 ReleaseBuffer() 的一些分析

    先 转载一段别人的文章 CString类的这几个函数, 一直在用, 但总感觉理解的不够透彻, 不时还有用错的现象. 今天抽时间和Nico一起分析了一下, 算是拨开了云雾: GetBuffer和Rele ...

  2. SQL server while语句、存储过程

    1.循环语句 2.存储过程 存储过程(stored procedure)有时也称为sproc.存储过程存储于数据库中而不是在单独的文件中,有输入参数.输出参数以及返回值等. 3.四种存储过程类型(类似 ...

  3. 2016HUAS暑假集训训练2 E - I Hate It

    Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少.这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写一个程序,模拟老 ...

  4. jdbc中java与mysql数据类型的映射

    注:这种类型匹配不是强制性标准,特定的JDBC厂商可能会改变这种类型匹配.例如Oracle中的DATE类型是包含时分秒,而java.sql.Date仅仅支持年月日.

  5. Web前端开发基础 第四课（CSS元素模型）

    css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又 ...

  6. BizTalk动手实验（十二）WCF-Oracle适配器使用

    1 课程简介 通过本课程熟悉WCF-Oracle适配器的的使用 2 准备工作 1. 新建BizTalk空项目 2. 配置BizTalk项目的应用程序名称及程序签名. 3. Oracle数据库 ( Or ...

  7. Linux ACL管理详解

    转自: http://linuxguest.blog.51cto.com/195664/124107 1. 为什么要使用ACL先让我们来简单地复习一下Linux的file permission.在li ...

  8. ThinkPHP 3.2.3 数据缓存与静态缓存

    ThinkPHP 3.2.3 中手册中数据缓存的地址是:http://www.kancloud.cn/manual/thinkphp/1835 静态缓存的地址是:http://www.kancloud ...

  9. Ueditor 1.4.3.1 使用 ThinkPHP 3.2.3 的上传类进行图片上传

    在 ThinkPHP 3.2.3 中集成百度编辑器最新版 Ueditor 1.4.3.1,同时将编辑器自带的上传类替换成 ThinkPHP 3.2.3 中的上传类. ① 下载编辑器(下载地址:http ...

  10. jdk安装配置具体分析

    JDK 选择安装目录 安装过程中会出现两次 安装提示 .第一次是安装 jdk ,第二次是安装 jre .建议两个都安装在同一个java文件夹中的不同文件夹中.(不能都安装在java文件夹的根目录下,j ...