<!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. JS全国城市三级联动

    HTML <select id="s_province" name="s_province"></select> <select ...

  2. 【Oracle】查看被锁的表和解锁

    --以下几个为相关表SELECT * FROM v$lock;SELECT * FROM v$sqlarea;SELECT * FROM v$session;SELECT * FROM v$proce ...

  3. 最近选购MP3而有感便携追求音质的一些心得

    之前的创新小石头MP3的耳机接口松动了.考虑到它已经服役了4年了.所以我准备重新买一个.而小石头出色的外放,我决定让给宝宝当玩具. 选购心得MP3的时候,原来的主导思想,是在低价位的里面考虑一台国际品 ...

  4. [翻译] BFKit

    BFKit BFKit is a collection of useful classes to develop Apps faster. BFKit是一个有用的工具集合,帮助你快速开发. Insta ...

  5. [Swift] 使用Playground

    使用Playground 1. 新建Playground 2. 写最简单的代码

  6. Linux入门-8 Linux系统启动详解

    系统启动流程 BIOS MBR GRUB KERNEL INIT 单用户修改root密码 GRUB加密 系统启动流程 BIOS MBR: Boot Code 执行引导程序 - GRUB 加载内核 执行 ...

  7. Windows环境下使用Nginx搭建负载均衡

    前言 最近没有什么事情,喜欢总结并学习东西!前几天写来一个Session共享,那么我们为什么需要Session共享?因为我们的应用程序分布在多个服务器上,为了合理分配用户的请求,就需要用到负载均衡技术 ...

  8. TMG 2010 使用脚本来导入URL集和域名集

    作为一个网管,相信有领导叫你限制员工上网的情况,例如只限制员工访问某些网站.在禁止的网站数量少的时候,添加URL集或者域名集是一件很简单的事情,如果禁止的网站数量多达1500个呢?如果再使用ISA S ...

  9. 沉淀再出发：ELK使用初探

    沉淀再出发:ELK使用初探 一.前言 ELK是Elasticsearch.Logstash.Kibana的简称,这三者是核心套件,但并非全部. 最近ElasticSearch可以说是非常火的一款开源软 ...

  10. SSH服务登陆验证

    ssh服务登陆验证有两种方式: 1.基于用户名和密码 2.基于密钥 基于用户名和密码验证过程: 1)客户端想ssh服务器发起请求,服务器会把自己的公钥发送给客户端, 2)客户端用服务器的公钥加密自己的 ...