<!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. 关于电脑宽带显示连接 qq可以登录 但是无法上网的问题

    ---恢复内容开始--- 大家都遇到过这种情况吧,右下角显示网络已连接,但就是上不了网,解决的办法大都是什么,打开网络与共享中心设置什么协议什么的,当然,这些有可能是有用的,但是有一些不管怎么设置协议 ...

  2. html5 移动端开发

    移动端开发总结     目录 1.手机与浏览器 2.Viewport(视窗) 3. 媒体查询 4.px,em,rem,pt 5.设备像素比devicePixelRatio 6.移动web中的图标及字体 ...

  3. Windows server 2008 Tips

    Tips for remote server in domain. Some Definition user [user] group workgroup domain Local account d ...

  4. Java快速入门-03-小知识汇总篇（全）

    Java快速入门-03-小知识汇总篇(全) 前两篇介绍了JAVA入门的一系小知识,本篇介绍一些比较偏的,说不定什么时候会用到,有用记得 Mark 一下 快键键 常用快捷键(熟记) 快捷键 快捷键作用 ...

  5. HandlerThread使用

    HandlerThread 是一个包含 Looper 的 Thread,我们可以直接使用这个 Looper 创建 Handler.  1.HandlerThread 源码 public class H ...

  6. 基于Vue的WebApp项目开发（六）

    实现商品购买列表页面 步骤一:新建goodslist.vue文件 <template> <div id="tml"> <!--利用mui中的图文表格组 ...

  7. Gitlab installtation

    环境:Centos7 安装配置(安装开启http和sshd): 1 yum -y install curl openssh-server postfix 2 systemctl enable sshd ...

  8. Java学习---RMI 技术分析[Hessian]

    一.什么是Hessian Hessian 是一个基于 binary-RPC 实现的远程通讯 library.使用二进制传输数据.Hessian通常通过Web应用来提供服务,通过接口暴露.Servlet ...

  9. ASP.NET Core 添加静态目录访问、使其它目录可被访问

    使用app.UseFileServer 在 public void Configure(){}中,修改或添加 app.UseFileServer(new FileServerOptions() { F ...

  10. nmap速查表v1.0（中文版）

    基本语法: #nmap [扫描方式] [命令选项] {目标} 扫描目标格式: IPv4 地址: 192.168.1.1IPv6 地址:AABB:CCDD::FF%eth0主机名:www.target. ...