<!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. Leetcode算法比赛---- Lexicographical Numbers

    问题描述 Given an integer n, return 1 - n in lexicographical order. For example, given 13, return: [1,10 ...

  2. QTableview 获取鼠标坐标的item（QModelIndex）

    要实现的功能是QTableview中Item项上右键弹出菜单这就必然要判断点击右键时鼠标指针是否在QTableView的Item上 如果是QTableWidget可以用itemAt来判断QTableV ...

  3. android去应用市场升级

    private String getAppInfo() {   try {   String pkName = this.getPackageName();   String versionName ...

  4. SVN的正确提交方式

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Rundy_Deng/article/details/80338093 也会让我们百思不得其解,甚至耽 ...

  5. LoadRunner简单培训相关笔记

    学校花了20万买了LoadRunner,因此作为幸运的一届,赶上了这场培训.以下为笔记以及培训后制作的简易思维导图. Loadrunner思维导图源码(Xmind): http://pan.baidu ...

  6. firewall 如何开放端口

    转自官方网页:http://www.firewalld.org/documentation/howto/open-a-port-or-service.html How to open port 80/ ...

  7. CentOS7 安装 JIRA 7.2.x 教程：下载、安装、汉化、破解

    1.先看视频,参考着能装出个试用版来,不同的地方后面再做说明.JIRA 安装视频(Linux) http://www.confluence.cn/pages/viewpage.action?pageI ...

  8. Django Ajax的使用

    简介: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX ...

  9. mysql那些招

    show table status mysql官方文档在 http://dev.mysql.com/doc/refman/5.1/en/show-table-status.html 这里的rows行是 ...

  10. ajax post data 获取不到数据

    ajax post  data  获取不到数据,注意 content-type的设置 .post/get关于 jQuery data 传递数据.网上各种获取不到数据,乱码之类的.好吧今天我也遇到了,网 ...