<!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. Spring Data MongoDB 分页查询

    在上篇文章 Spring Data MongoDB 环境搭建 基础上进行分页查询 定义公用分页参数类,实现 Pageable 接口 import java.io.Serializable; impor ...

  2. grep用法详解:grep与正则表达式

    首先要记住的是: 正则表达式与通配符不一样,它们表示的含义并不相同!正则表达式只是一种表示法,只要工具支持这种表示法, 那么该工具就可以处理正则表达式的字符串.vim.grep.awk .sed 都支 ...

  3. 横向开关（switch）

    横向开关(switch) 一:属性 1.Activity //横向开关 public class SwitchActivity extends Activity { private Switch sw ...

  4. Android设备网络压力测试

    网络测试的几个维度: 网络的性能 带宽:通过TCP测试来量度 时延:用ping命令量度 数据报丢失:用Iperf UDP测试来量度 Jitter(延时变化):用Iperf UDP测试来量度 信号强度( ...

  5. Windows系统环境下安装dlib

    Windows系统环境下安装dlib 因为今天需要在windows环境下做一些图片处理,所以需要在pycharm中配置环境,而其中需要的主要是dlib的安装: 下面说一下关于dlib的配置安装: —- ...

  6. PHPStorm/webstorm/PyCharm tips

    phpstorm对于使用PHP开发web的人员来说,是一个非常不错的编辑开发IDE,以前用过sublime,但是相比于storm,sublime在浏览legacy代码,类代码编辑方面明显要逊色不少.同 ...

  7. N点虚拟主机管理系统如何使用？

    有朋友问起N点虚拟主机管理系统怎么用呢?下面大概整理下他的使用方法,咱们来看看吧.          在讲如何使用N点虚拟主机管理系统之前,我们先来了解一下N点虚拟主机管理系统的介绍. ​     N ...

  8. ExpressRoute 概述

    使用 Azure ExpressRoute 可通过连接服务提供商所提供的专用连接,将本地网络扩展到 Azure 云.使用 ExpressRoute 可与 Azure云服务建立连接. 可以从任意位置之间 ...

  9. 使用TFHpple解析html

    使用TFHpple解析html https://github.com/topfunky/hpple 前期准备工作 引入静态库文件 添加库文件的 header search paths(注意,必须选中 ...

  10. 51nod 1437 迈克步

    题目链接 先利用单调栈or其他方法找到一个元素g[i]作为最小值的区间,设为[L, R]. 那么长度为R-L+1的组的最大值ans=max(ans,g[i]).但是有一个问题: 比如6这个元素是长度为 ...