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的 ...
随机推荐
- OpenStack 创建虚机过程简要汇总
1. 总体流程 翻译自原文(英文):https://ilearnstack.com/2013/04/26/request-flow-for-provisioning-instance-in-opens ...
- 廖雪峰Java3异常处理-1错误处理-2捕获异常
1捕获异常 1.1 finally语句保证有无错误都会执行 try{...}catch (){...}finally{...} 使用try...catch捕获异常 可能发生异常的语句放在try{... ...
- blog决定不用二级域名，改为二级目录
看了一篇文章,受益匪浅,到底是用二级域名还是二级目录?已转载到得闲佬设计. 分析了一下得闲佬设计的因素,因为得闲佬设计是小站,流量很小,而且更新文章频率也不大,没必要把流量分出去做一个独立的站点 所以 ...
- 一次cookie引起系统不断要求重新登录问题分析
我们的产品里有一配置服务(tomcat),采用ajax来通信交互 但是最近频频发现登录后马上弹出要重新登录的情况,一开始以为是cookie没有带上导致session找不到,后来问题依旧,查看浏览器co ...
- [UE4]移除UI（User Widget）并销毁
1.移除UI,使用“Remove from Parent”方法 2.最后一步给UI变量赋值的时候,如果保持默认选择“Select Assets”,则会把UI变量销毁(赋值为null).
- 使用LiteOrm删除数据对象失败的坑
使用 LiteOrm.newSingleInstance(BaseApplication.getInstance(), Constant.DB_NAME); 在不同进程中创建了两次对象,在保存和删除的 ...
- restful 涵义
REST,即Representational State Transfer的缩写: "表现层状态转化" REST的名称"表现层状态转化"中,省略了主语.&quo ...
- C++ 调用 Lua
直接上代码: 1:c++代码 #include <lua.hpp> #include <LuaBridge/LuaBridge.h> #include <iostream ...
- 搭建（WSTMart）php电商环境时缺少fileinfo函数
搭建WSTMart环境步骤: 第一步:安装phpstudy,一键安装即可 第二步:把下好的系统源码,放到一个文件夹中,并放到刚刚安装好的phpstudy下WWW文件夹下,如WWW>WSTMart ...
- 权重比较（id class 标签）
权重的取值: 按照 id class 标签 的顺序在其位置上标出1或者0 例如下面的例子 <!DOCTYPE html> <html lang="en"&g ...