1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>左侧菜单</title>
  6.     <style>
  7.         .outer{
  8.             height: 1000px;
  9.             width: 100%;
  10.         }
  11.         .menu{
  12.             float: left;
  13.             background-color: beige;
  14.             width: 30%;
  15.             height: 500px;
  16.         }
  17.         .content{
  18.             float: left;
  19.             background-color: red;
  20.             width: 70%;
  21.             height: 500px;
  22.         }
  23.         .title{
  24.             background-color: aquamarine;
  25.             line-height: 40px;
  26.         }
  27.         .hide{
  28.             display: none;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33. <div class="outer">
  34.     <div class="menu">
  35.         <div class="item">
  36.             <div class="title" onclick="show(this)">菜单一</div>
  37.             <div class="con">
  38.                 <div>111</div>
  39.                 <div>111</div>
  40.                 <div>111</div>
  41.             </div>
  42.         </div>
  43.         <div class="item">
  44.             <div class="title" onclick="show(this)">菜单二</div>
  45.             <div class="con hide">
  46.                 <div>222</div>
  47.                 <div>222</div>
  48.                 <div>222</div>
  49.             </div>
  50.         </div>
  51.         <div class="item">
  52.             <div class="title " onclick="show(this)">菜单三</div>
  53.             <div class="con hide">
  54.                 <div>333</div>
  55.                 <div>333</div>
  56.                 <div>333</div>
  57.             </div>
  58.         </div>
  59.     </div>
  60.     <div class="content"></div>
  61. </div>
  62. <script src="/static/jquery.min.js"></script>
  63. <script>
  64.     function show(self) {
  65.         $(self).next().removeClass('hide');
  66.         $(self).parent().siblings().children('.con').addClass('hide');
  67.     }
  68. </script>
  69. </body>
  70. </html>

jquery左侧菜单的更多相关文章

  1. jQuery左侧菜单实例

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

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

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

  3. python : jquery实现左侧菜单

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

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

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

  5. jquery实现左侧菜单 效果

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

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

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

  7. LayUI左侧菜单无法保持选中状态

    1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图 但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...

  8. 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项

    权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...

  9. ajax实现简单的点击左侧菜单，右侧加载不同网页

    实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 原理:ajax的 ...

随机推荐

  1. Java学习---异常处理

    import java.util.Scanner; public class MyExceptionTest { public static void check(Square A) throws W ...

  2. 学习笔记之Python for Data Analysis

    Python for Data Analysis, 2nd Edition https://www.safaribooksonline.com/library/view/python-for-data ...

  3. python输出缓冲区的问题

    碰到的问题,一段代码,print在前,log的在后,查看日志中log的反而在前面.是python输出缓冲区的问题. python输出缓冲区要满 4k 才写入文件,除非禁用缓存或者强制输出或者程序结束. ...

  4. go中defer的理解--defer、return、返回值之间执行顺序

    defer可以读取有名返回值 func c() (i int) { defer func() { i++ }() return 1 } 输出结果是2. 在开头的时候,我们知道defer是在return ...

  5. centos7 firewall-cmd 用活firewalld防火墙中的zone

    原文:http://www.excelib.com/article/290/show/ firewalld中zone的含义学生前面已经给大家介绍过了,说白了一个zone就是一套规则集.可是什么时候该用 ...

  6. 01-TCP/IP概述

    TCP/IP 概述 允许不同厂家的各种型号的计算机使用不同操作系统互相进行通信 真正的开放系统 "全球互联网"或"因特网"的基础 2.分层 网络协议通常分不同层 ...

  7. 阿里直播在线人数只统计rtmp格式的播放源

  8. Go语言 函数，工程管理

    Go语言 函数,工程管理 1.无参无返回值函数的使用 package main import "fmt" func main() { // 无参无返回值函数的调用:函数名() fu ...

  9. java中序列化的简单认识

    一.什么是序列化 Java平台允许我们在内存中创建可复用的Java对象,但一般情况下,只有当JVM处于运行时,这些对象才可能存在,即,这些对象的生命周期不会比JVM的生命周期更长.但在现实应用中,就可 ...

  10. Keras 实现一个简单GAN

    Keras 实现一个简单GAN 代码中需提供: Loss Function  参见Keras 或者 Tensorflow 文档 model_param_matrix   反向调整的模型参数/参数矩阵 ...