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 ...
随机推荐
- 修改/dev/shm大小 tmps
/dev/shm 在oracle开启AMM时发现/dev/shm下的空间不够用 WARNING: You are trying to use the MEMORY_TARGET feature. T ...
- 用户态驱动--UIO机制的实现【转】
转自:https://blog.csdn.net/u013982161/article/details/51584900 1 uio理论部分 1.1为什么出现了UIO? 硬件设备可以根据功能分为网 ...
- git与eclipse集成之更新特性分支代码到个人特性分支
1.1. 更新特性分支代码到个人特性分支 在基于特性分支开发的过程中,存在多人向特性分支提交代码的情况,开发者需要关注特性分支代码与个人分支代码保持同步,否则可能导致提交代码冲突. 具体代码同步步骤: ...
- pl sql 中文乱码
一:查看oracle数据库的字符集编码: select * fromnls_database_parameters where parameter in ('NLS_LANGUAGE', 'NLS_T ...
- Android ADT 离线下载
网上很多的Android在IDE eclipse的开发环境教程,ADT的就安装肯定也在里面啦 ADT的安装都是一个在线安装地址: https://dl-ssl.google.com/android/e ...
- ZOJ 2110 DFS
狗要出门,且正好在T秒 就是DFS + 剪枝, 联系一下剪枝技巧 #include<iostream> #include<cstdio> #include<cstring ...
- mysql修改表、字段、库的字符集(转)
原文链接:http://fatkun.com/2011/05/mysql-alter-charset.html MySQL中默认字符集的设置有四级:服务器级,数据库级,表级 .最终是字段级 的字符集设 ...
- python-迭代器、生成器、内置函数及面向过程编程
一.迭代器 迭代器是迭代取值的工具,迭代是一个重复的过程,每一次重复都是基于上一次的结果而来的. 为什么要用迭代器呢? 1.可以不依赖索引取值 2.同一时刻在内存中只有一个值,不会过多的占用内存 如何 ...
- android系统下消息推送机制
一.推送方式简介: 当前随着移动互联网的不断加速,消息推送的功能越来越普遍,不仅仅是应用在邮件推送上了,更多的体现在手机的APP上.当我们开发需要和服务器交互的应用程序时,基本上都需要获取服务器端的数 ...
- hive学习01词频统计
词频统计 #创建表,只有一列,列名line create table word_count ( line string) row format delimited fields terminated ...