<!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. [转][xml]SQL转义

    SQL语句包含">"和"<"时,在PL/SQL中可以正常运行,但是放在XML中,编译报错,这是因为在XML文档中的所有文本都会被解析器解析,文本内容 ...

  2. android 5.0安装应用冲突问题

    公司二款产品无法同时安装 为了查看原因 用adb命令安装((adb 命令要配置环境环境,path 盘符+adt-bundle-windows-x86-20140702\sdk\platform-too ...

  3. centos7更改引导项等待时间

    centos7已经不用grub,改用grub2. [ root]# vi /boot/grub2/grub.cfg 找到并更改启动时间(timeout) [root]# grub2-mkconfig ...

  4. webview之总结2

    21,js与androud交互之javascript调用本地之方法一(接口类): ========= 21,js与androud交互之javascript调用本地之方法一(接口类): Android4 ...

  5. webview自总结

    2,webview ---- 运行时不调用系统自带浏览器: 1,安卓webview post传值问题: 11,WebView基本功能(html5.文件下载和远程URL) 10,webview--网络超 ...

  6. [UE4]蓝图中的基本数据类型

    uint8:无符号整数(非负整数),u:unsigned 字符串 蓝图Utilities下有很多引擎自带的各种类型的对象的常用方法. 字符串与整数之间的转换(例如将字符串“23”转换成数字23) 如果 ...

  7. [UE4]嵌套Canvas

  8. conda命令

  9. JDBC连接数据库，结合DbUtil数据库连接工具类的使用

    (以Mysql数据库为例) 第一步:在项目里配置数据库驱动 Build Path->configure  Build Path ->Add Exteral JARs   将JDBC驱动包导 ...

  10. Vue3.0项目快速搭建

    安装安装vue-cli npm install -g @vue/cli # 或者 yarn global add @vue/cli 创建项目 vue create hello-world 至此项目搭建 ...