<!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. 学习笔记之Intermediate Python for Data Science | DataCamp

    Intermediate Python for Data Science | DataCamp https://www.datacamp.com/courses/intermediate-python ...

  2. folly无锁队列正确性说明

    folly无锁队列是facebook开源的一个无所队列,使用的是单向链表,通过compare_exchange语句实现的多生产多消费的队列,我曾经花了比较多的时间学习memory_order的说明,对 ...

  3. openstack热添加磁盘

    假定在虚拟机当中添加了磁盘,但是虚拟机没有识别出来:如何识别出来 可以使用命令 echo '- - -' >/sys/class/scsi_host/host0/scan 使用后就可以识别出来了 ...

  4. ocr 文字区域检测及识别

    ocr 文字区域检测及识别 # coding=utf- from PIL import Image, ImageFilter, ImageEnhance from skimage.filters im ...

  5. numpy.ravel() vs numpy.flatten()

    首先声明两者所要实现的功能是一致的(将多维数组降为一维),两者的区别在于返回拷贝(copy)还是返回视图(view),numpy.flatten()返回一份拷贝,对拷贝所做的修改不会影响(reflec ...

  6. set函数&操作

    集合的交叉并补 交集, 共同的部分 set1 & set2 set1.intersection(set2) 差集 set1有set2没有的元素 set1 - set2 set1.differe ...

  7. gulp 配置达到实现import export支持

    gulp.task('tojs', () => { return gulp.src('./es/**/*.js') .pipe(babel({ babelrc: false, plugins: ...

  8. synergy一个鼠标键盘控制多台电脑

    有些时候我们同时操作多台电脑,但是我们只用一个鼠标和一个键盘,如果通过转换器啊或者是多个鼠标键盘就非常不方便了 下面我介绍一下通过安装synergy这个软件来给开发人员提供方便 这个软件安装比较简单, ...

  9. Android 打开高德地图、百度地图进行导航；打开第三方App去导航；

    抽成工具类了,复制下来就能直接用了,直接看代码吧: 高德地图Url Api: http://lbs.amap.com/api/amap-mobile/guide/android/navigation ...

  10. Centos7 开放80,3306端口解决办法

    所有扯iptables的文章都是扯淡!!! centos 7 默认防火墙由firewalld来管理!关iptables屁事! 以开放80端口为例,执行以下命令: 开放80端口:firewall-cmd ...