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 ...
随机推荐
- AI 玩法整理
随着信息技术的火热发展,人工智能已经成为IT全行业的风口爆发点,既然风口来了,作为技术人人员也都毫不犹豫的分一杯羹,怎么玩呢? 接下来的博客就会带领大家一起玩玩AI 认识AI--略,如果有需要的可以再 ...
- Git学习笔记04-管理修改
Git跟踪并管理的是修改,而非文件.新增文件,修改一行,删除一点,都算是修改. 在.git工作区新增一个文件,test.txt,输入test git ...然后git add add之后修改t ...
- requests库入门13-会话对象
会话对象可以在跨请求保持某些参数,会话对象有requests api的大部分方法,我理解会话对象就是一个资源共享池 使用requests.Session()可以创建会话对象的实例 还是以之前GitHu ...
- vc++基础班[21]---文件的基本操作之CFile
①.文件的创建.打开.关闭: 文件的创建.打开:CFile::Open 文件的关闭:CFile::Close CFile::modeCreate:以新建方式打开,如果文件不存在,则新建:如果文件已 ...
- ThreadLocal与Synchronized区别
ThreadLocal和Synchonized都用于解决多线程并发访问他们两者的区别:synchronized是利用锁的机制,使变量或代码块在某一时该只能被一个线程访问,而ThreadLocal为每一 ...
- （转！）利用Keras实现图像分类与颜色分类
2018-07-19 全部谷歌渣翻加略微修改 大家将就的看哈 建议大佬们还是看看原文 点击收获原文 其中用到的示例文件 multi-output-classification 大家可以点击 下载 . ...
- MySQL--（了解）可能会用到的内置函数
mysql内置函数列表可以从mysql官方文档查询,这里仅分类简单介绍一些可能会用到的函数.1 数学函数abs(x)pi()mod(x,y)sqrt(x)ceil(x)或者ceiling(x)rand ...
- python操作三大主流数据库(14)python操作redis之新闻项目实战②新闻数据的展示及修改、删除操作
python操作三大主流数据库(14)python操作redis之新闻项目实战②新闻数据的展示及修改.删除操作 项目目录: ├── flask_redis_news.py ├── forms.py ├ ...
- python安装提示No module named setuptools,wget提示ERROR 403: SSL is required
在下载安装一个python工具时提示报错No module named setuptools [root@kermit supervisor-3.3.0]$ sudo python setup.py ...
- Laravel 5.2错误-----Base table or view not found: 1146 Table
报出这个问题,我想就是数据库表名不对导致的. 为什么呢?感觉laravel太强大了,很专业的感觉. 因为它对单词命名的单复数区分的很清楚吧.laravel会自动的将模型名自动替换成名称的复数形式,然后 ...