<!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. jQuery版本问题，及事件源

    jQuery版本的分界线是2.0 2.0之前很多方法支持ie低版本,2.0之后就不支持了 工具:index() 指定元素的索引  (有参数) 不传参的情况下,父级元素下同级元素的排名,传参:指定元素的 ...

  2. 计算机存储单位KB,MB,GB,TB,PB,EB,ZB,YB后面是什么？

    关于计算机存储单位KB,MB,GB,TB,PB,EB,ZB,YB后面是什么? 我们知道Kb是1000的1次方,所以 MB就是1000的2次方(106) GB就是1000的3次方(109) TB就是10 ...

  3. STM32 f407 温湿度采集报警

    软件 keil5 实现 1.使用stm32f407中的DS18B20传感器采集空气温度 2.使用stm32f407中的DHT11传感器采集空气的温度和湿度 3.显示到stm32f407的LCD液晶显示 ...

  4. Java热部署相关

    今天发现早年在大象笔记中写的一篇笔记,之前放在ijavaboy上的,现在它已经访问不了了.前几天又有同事在讨论这个问题.这里拿来分享一下. 在web应用开发或者游戏服务器开发的过程中,我们时时刻刻都在 ...

  5. MySQL 索引建立原则及注意事项

    一.索引建立的几大原则: 1) 最左前缀匹配原则,非常重要的原则,mysql会一直向右匹配直到遇到范围查询(>.<.between.like)就停止匹配,比如a = 1 and b = 2 ...

  6. MySQL 之管理脚本

    Mysql中查看每个IP的连接数 ) as ip , count(*) from information_schema.processlist group by ip;

  7. VMware NAT模式多个虚拟机相互访问

    在一台主机上只允许有一个NAT模式的虚拟网络.因此,同一台主机上的多个采用NAT模式网络连接的虚拟机也是可以相互访问的.

  8. Django中的跨表查询，多表查询。

    一:Django中的ORM进行操作. 必须掌握的十三条: <1> all(): 查询所有结果 <2> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 & ...

  9. HTTP请求返回值所代表的含义

    一些常见的状态码为: 200 - 服务器成功返回网页(表示请求成功) 404 - 请求的网页不存在(可能是网络的问题,也可能是网页没办法访问不代表网页不存在) 503 - 服务器超时(服务器故障) 下 ...

  10. 图算法之——dijkstra算法

    一.算法特点 目标:找出加权图中前往X的最短路径 适用于:无环有向加权图,且各边的权值为正 二.算法思路 三.算法示例演示 如下图,请找出结点v1到其他各个结点的最短路径: 首先创建一个字典(散列表) ...