jquery左侧菜单
<!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左侧菜单的更多相关文章
- jQuery左侧菜单实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读
关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...
- python : jquery实现左侧菜单
左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
- jquery实现全选，取消，反选的功能&实现左侧菜单
1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- jquery实现左侧菜单 效果
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- 使用layui-tree美化左侧菜单，点击生成tab选项
layui-tree美化左侧菜单 html <div class="layui-side layui-bg-black"> <div class="la ...
- LayUI左侧菜单无法保持选中状态
1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图 但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...
- 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项
权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...
- ajax实现简单的点击左侧菜单，右侧加载不同网页
实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 原理:ajax的 ...
随机推荐
- 廖雪峰Java3异常处理-1错误处理-3抛出异常
1.异常的传播 当某个方法抛出异常时: 如果当前方法没有捕获,异常就被抛到上层调用方法 直到遇到某个try...catch被捕获 使用printStackTrace()打印处方法的调用栈 import ...
- Jmeter（一）简介以及环境搭建
刚刚在打扫卫生的时候,就一直在思考近一年以来所学知识及体系.知识太过于碎片化,整理的东西全写在笔记本上,日常工作不可能全部用到,所以复习很重要.因此开始准备将一些知识写在随笔里边,用于知识体系的重建, ...
- 梳理源码：spring ioc容器加载的流程图
- sqoop导出mysql数据进入hive错误
看mr的运行显示:sqoop job可以获得的select max(xxx)结果,但是当mr开始时却显示大片错误,就是连接超时,和连接重置等问题, 最后去每个节点ping mysql的ip地址,发现 ...
- 备用DNS域名服务器
DNS:1.34.151.129,域名:www#eliuliang#com, 个人用解析地址,请勿使用.
- 6.6安装编译安装zabbix3.2
添加yum源 get -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-6.repo #安装阿里云y ...
- CF1133E K Balanced Teams(DP)
/* 排序之后每个点往前能选择的是一段区间, 所以我们实际上转移位置是确定的 然后f[i][j]表示到了i选了j段的最大贡献, 显然状态数是O(n^2)的, 转移是O(1)的 */ #include& ...
- hive类型转化错误，会错误提示指定分区参数
select * from TRAD_LIST t WHERE t.dt >= '2017-10-18' and t.dt <= '2017-11-01' and t.con_level ...
- Bootstrap如何关闭弹窗
1.layer.closeAll()无法关闭弹窗的解决办法 使可以使用:parent.layer.closeAll() 2.layer.close()或者layer.closeAll()失效的情况下强 ...
- VMware虚拟机上配置nginx后，本机无法访问问题
nginx装在CentOS上,用本机访问虚拟机的时候却出现了不能访问的问题,查了资料以后,原来是防火墙的问题.具体情况如下:防火墙可以ping通虚拟机,虚拟机也可以ping通防火墙.接着检查了服务器端 ...