<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .outer{

             width:100%;

             height:1000px;

         }

         .menu{

             height:500px;

             width:30%;

             float: left;

             background-color:burlywood;

         }

         .content{

             height: 500px;

             width: 70%;

             float: left;

             background-color:aqua;

         }

         .hide{

             display:none;

         }

     </style>

 </head>

 <body>

 <div class="outer">

     <div class="menu">

         <div class="item">

             <div class="title" onclick="show(this)">菜单一</div>

             <div class="con">

                 <div>111</div>

                 <div>111</div>

                 <div>111</div>

             </div>

         </div>

         <div class="item" >

             <div class="title" onclick="show(this)">菜单二</div>

             <div class="con hide">

                 <div>222</div>

                 <div>222</div>

                 <div>222</div>

             </div>

         </div>

         <div class="item">

             <div class="title" onclick="show(this)">菜单三</div>

             <div class="con hide">

                 <div>333</div>

                 <div>333</div>

                 <div>333</div>

             </div>

         </div>

     </div>

     <div class="content"></div>

 </div>

 <script src="jquery-3.3.1.min.js"></script>

 <script>

     function show(self) {

         $(self).next().removeClass('hide');

         $(self).parent().siblings().children('.con').addClass('hide');

     }

 </script>

 </body>

 </html>

jQuery左侧菜单实例的更多相关文章

  1. jquery左侧菜单

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

  2. 下拉菜单;手风琴;九宫格的Jquery的使用实例

    下拉菜单;手风琴;九宫格的Jquery的使用实例 1.下拉菜单 效果如图: 代码如下: <!DOCTYPE html> <html lang="en"> & ...

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

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

  4. python : jquery实现左侧菜单

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

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

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

  6. jquery实现左侧菜单 效果

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

  7. jquery简介和实例

    一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. 参考:http://www.php100 ...

  8. jQuery基础与实例

    一.简介 1.什么是jQuery jQuery是一个轻量级.快速简洁的javaScript库,能让我们方便快捷的选择元素操作元素属性. 2.下载地址 3.jQuery使用方式 $("div& ...

  9. JQuery插件开发简单实例

    经常使用Jquery的各种插件,却对如何开发插件一无所知,以为是一件很麻烦的事儿?其实不然,下面通过一个简单的实例,来看一下Jquery Plugin的开发. 先看DEMO:动画菜单 不用插件如何实现 ...

随机推荐

  1. apache配置域名访问本地空间

    1. 首先修改C盘WINDOWS\system32\drivers\etc目录下的 hosts 文件,用记事本打开,加入: 127.0.0.1 www.a.com hosts文件是用来解析的,你在浏览 ...

  2. JS上传图片转化成Base64编码demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 汇编语言程序环境搭建masm+debug64位 win10/7

    介绍:MASM是Microsoft Macro Assembler 的缩写,是微软公司为x86 微处理器家族开发的汇编开发环境,拥有可视化的开发界面,使开发人员不必再使用DOS环境进行汇编的开发,编译 ...

  4. 50+ Useful Docker Tools

    As containers take root, dozens of tools have sprung up to support them. Check out your options for ...

  5. C#-XML-数据传输

    http://www.cnblogs.com/fengxuehuanlin/p/5631664.html 关于xml是属于一个比较重要的东西,在平时开发的过程中,这块内容最主要的是要掌握XML内容的读 ...

  6. Azure Linux 虚拟机常见导致无法远程的操作

    对Azure虚拟机的一些操作可能会导致无法远程连接,本文罗列了以下导致不能远程连接的场景: 场景1 - 在虚拟机配置IP地址或MAC地址 场景2 - 错误地修改服务的配置文件 场景3 - 误设置防火墙 ...

  7. 动态展开tableView的cell[1]

    动态展开tableView的cell[1] 源码地址:https://github.com/xerxes235/HVTableView 虽然作者写的demo很好看,可是,你很难理解他是怎么玩的-_-! ...

  8. Python学习---Python数据类型1206

    1.1. 字符串格式化 字符格式化输出 占位符 %s  s = string %d  d = digit 整数 %f   f = float 浮点数,约等于小数 #version: python3.2 ...

  9. Salesforce和SAP Netweaver里数据库表的元数据设计

    从Salesforce官网可以了解到Salesforce的force.com平台里数据库表的设计:https://developer.salesforce.com/page/Multi_Tenant_ ...

  10. CentOS7.X安装Redis-4.0.8以及Redis集群搭建

    安装redis 安装前的准备 yum install \ vim \ wget \ make \ gcc \ gcc-c++ \ automake \ autoconf \ -y \ 下载解压并安装 ...