JQuery之左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menu{
float: left;width: 30%;height: 500px;background-color: antiquewhite;
}
.content{
float: left;width: 70%;height: 500px;background-color: blue;
}
.title{
background-color: black;
color: white;
height: 50px;
line-height: 50px;
}
.hide{
display: none;
} </style>
</head>
<body>
<div>
<div class="menu">
<div class="item">
<div class="title" onclick="Func(this);">菜单一</div>
<div class="body ">
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
</div>
<div class="item">
<div class="title"onclick="Func(this);">菜单二</div>
<div class="body hide">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
</div>
<div class="item">
<div class="title"onclick="Func(this);">菜单三</div>
<div class="body hide">
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div> </div>
<div class="content"></div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
function Func(ths) {
console.log($(ths).text());
$(ths).next().removeClass('hide');
$(ths).parent().siblings().find('.body').addClass('hide'); }
</script>
</body>
</html>
JQuery之左侧菜单的更多相关文章
- python : jquery实现左侧菜单
左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
- jquery实现左侧菜单 效果
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- jquery左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读
关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...
- jquery实现全选，取消，反选的功能&实现左侧菜单
1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 使用layui-tree美化左侧菜单，点击生成tab选项
layui-tree美化左侧菜单 html <div class="layui-side layui-bg-black"> <div class="la ...
- LayUI左侧菜单无法保持选中状态
1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图 但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）
http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...
- 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项
权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...
随机推荐
- 关于dubbo服务超时的讨论
呵呵,偷点懒,直接把QQ上的讨论发下来. huxin 10:35:19你们现在超时了是咋办的,首先超时了,回复用户肯定是要的 huxin 10:36:14超时了用户实际是不知道这业务是成功还失败了 ...
- 使用jsencrypt(rsa加密方式)给js加密防被刷
加密步骤 1.需要加密的参数 * * ).toISOString().replace(/T/g, }Z/, ''); //使用本地时间,然后转换格式 2.js中引用jsencrypt.js文件,然后实 ...
- 待解决close
关于close语句放在哪里,貌似会对结果产生影响 #include <iostream> #include <fstream> using namespace std; int ...
- requests库入门14-Cookie
因为http是没有状态的协议,上一个请求和下一个请求是没有关联.但是现实中又需要有关联,比如一个页面某个操作需要登陆之后才能进行,没有登陆就提示你登陆.为了实现这样的效果,所以出现了Cookie和Se ...
- deque-->collections之#双向消息队列
deque 双向队列单项队列 方法: append #往右边添加一个appendleft #左边添加clear #清空队列count #看看这个队列里某个元素出现了多少次extend #从右边多个元素 ...
- button 去掉原生边框
button按钮触发 hover 时,自带边框会显示,尤其是 button 设置圆角时,如图: 解决办法: outline: 0;
- ansible笔记（6）：常用模块之命令类模块
ansible笔记():常用模块之命令类模块 command模块 command模块可以帮助我们在远程主机上执行命令 注意:使用command模块在远程主机中执行命令时,不会经过远程主机的shell处 ...
- centos7.4_x86_64安装grafana5.2.1并安装常用zabbix插件
获取并安装grafana5.2.1# wget https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-5.2.1-1. ...
- Linux查看所有用户和组信息
主要通过以下两个命令: cat /etc/passwd cat /etc/group 步骤一:cat /etc/passwd查看所有的用户信息,详情如下图: 步骤2:cat /etc/passwd|g ...
- [Linux][HTTP] Cookie和Set-Cookie
HTTP 请求报文通过Cookie字段通知服务端当前页面的域生效中的cookie; GET /my/login.php HTTP/1.1 Host: 192.168.88.207:91 Connect ...