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 ...
随机推荐
- SSIS服务无法登录的解决方案
现象1:登录SSIS报权限认证失败. 授予对 Integration Services 服务的访问权限 运行 Dcomcnfg.exe. Dcomcnfg.exe 提供用于修改注册表中的某些设置的用户 ...
- 【VMware vSphere】VMware vSphere简单了解
*什么是VMware vSphere 说VMware vSphere可能刚开始都是一脸懵逼,但是看到VMware时,首先想到的是不是VMware Workstation?也就是虚拟 ...
- 绕过PALOALTO TRAPS EDR解决方案
0x1 技术点 PaloAlto Traps(EDR解决方案)基于行为封锁和标记许多黑客工具. 0x2 绕过方法 最简单的解决方案就是禁用内置实用程序,即; Cytool.Cytool是一个集成命令行 ...
- LwIP Application Developers Manual7---lwIP with or without an operating system
1.前言 最近有一些讨论关于lwIP如何在单机的环境(比如,没有一个多线程的操作系统)使用. 本文的目的就是描述lwIP如何在无多线程操作系统或有多线程操作系统环境中运行 2.lwIP单线程内核 2. ...
- MySQL中binlog参数:binlog_rows_query_log_events-记录具体的SQL【转】
在使用RBR也就是行格式的时候,去解析binlog,需要逆向才能分析出对应的原始SQL是什么,而且,里面对应的是每一条具体行变更的内容.当然,你可以开启general log,但如果我们需要的只是记录 ...
- jquery获取浏览器URL参数
getRequestParams:function(param){ var reg = new RegExp("(^|&)" + param + "=([^&am ...
- LOJ 6277-6280 数列分块入门 1-4
数列分块是莫队分块的前置技能,练习一下 1.loj6277 给出一个长为n的数列,以及n个操作,操作涉及区间加法,单点查值. 直接分块+tag即可 #include <bits/stdc++.h ...
- Going Home HDU - 1533 费用流
http://acm.hdu.edu.cn/showproblem.php?pid=1533 给一个网格图,每两个点之间的匹配花费为其曼哈顿距离,问给每个的"$m$"匹配到一个&q ...
- web@css样式进阶--图形字体、动画、显隐....
1.图形字体<i class="fa fa-heart"></i> 操作类名,需<link rel="stylesheet" hr ...
- 增加一台web机注意事项
2017年4月18日 15:23:57 星期二 增加一台web机时, 先不要挂载进lb 1. 需要将此机器的ip加入到其它服务的白名单内: 数据库, 缓存, 第三方接口等 2. 绑定hosts, 点点 ...