<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>左侧菜单</title>

    <style>

        .outer{

            height: 1000px;

            width: 100%;

        }

        .menu{

            float: left;

            background-color: beige;

            width: 30%;

            height: 500px;

        }

        .content{

            float: left;

            background-color: red;

            width: 70%;

            height: 500px;

        }

        .title{

            background-color: aquamarine;

            line-height: 40px;

        }

        .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="/static/jquery.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. 亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

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

  3. python : jquery实现左侧菜单

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

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

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

  5. jquery实现左侧菜单 效果

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

  6. 使用layui-tree美化左侧菜单，点击生成tab选项

    layui-tree美化左侧菜单 html <div class="layui-side layui-bg-black"> <div class="la ...

  7. LayUI左侧菜单无法保持选中状态

    1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图 但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...

  8. 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项

    权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...

  9. ajax实现简单的点击左侧菜单，右侧加载不同网页

    实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 原理:ajax的 ...

随机推荐

  1. 问题 H: 老管家的忠诚（线段树）

    问题 H: 老管家的忠诚 时间限制: 0 Sec  内存限制: 128 MB提交: 54  解决: 21[提交][状态][讨论版][命题人:外部导入] 题目描述         老管家是一个聪明能干的 ...

  2. Jmeter（十二）关联

    关联在实际业务需求中是随处可见的,比如:支付需要提交订单成功的订单号:修改个人资料需要登录成功响应报文信息...总之关联无处不在,今天来记一记Jmeter的关联功能. Jmeter关联的方法比较常用的 ...

  3. CAP在MySQL的分析

    此文转载在登博的文章,给大家分享 问题一:数据一致性.在不使用共享存储的情况下,传统RDBMS(例如:Oracle/MySQL/PostgreSQL等),能否做到在主库出问题时的数据零丢失. 问题二: ...

  4. http和https的区别联系

    超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂 ...

  5. CentOS之Vim

    安装  yum install -y vim-enhanced 移动光标 h或者向左的方向键:光标向左移动一个字符 l或者向右的方向键:光标向右移动一个字符 j或者向下的方向键:光标向下移动一个字符 ...

  6. Java - 27 Java 集合框架

    Java 集合框架 早在Java 2中之前,Java就提供了特设类.比如:Dictionary, Vector, Stack, 和Properties这些类用来存储和操作对象组. 虽然这些类都非常有用 ...

  7. 五、html5表单

  8. Java框架相关

    问题及答案来源自<Java程序员面试笔试宝典>第五章 Java Web 5.3 框架 11.什么是IoC? IoC:控制反转(Inverse of Control, IoC),有时候也被称 ...

  9. list 列表 和一些操作方法

    1. 什么是列表 定义: 能装对象的对象 在python中使用[]来描述列表, 内部元素用逗号隔开. 对数据类型没有要求 列表存在索引和切片. 和字符串是一样的. 2. 相关的增删改查操作(重点) 添 ...

  10. webkitAnimationEnd动画事件

    春节终于过完了,自己春节似乎过的有点大,过完春节之后,态度一直没有调整好,总有一股过节的情绪,没有完全进入学习和工作的状态来.继续调整当中…… 这两天项目中遇到一个小需求,十分类似于支付宝蚂蚁森林给小 ...