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的 ...
随机推荐
- CSDN也有我的博客啦
我的CSDN:https://blog.csdn.net/qq_40875849
- 时间同步chrony
时间同步chrony [root@compute02 ~]# yum install chrony 编辑配置文件 将sever区块下的内容修改为时间服务器的地址 .此处可以写局域网内的 ...
- 关于git中自己的分支和主分支有冲突的解决方案（git和乌龟git）
阐述一个案例,最近在开发中遇到一个问题.自己在代码的主分支拉了一个分支,开始快乐的开发修改了.同事小明也在主分支拉了一个分支,也在快乐的修改.小明的开发速度很快,一个问题很快就解决了,并且把自己的代码 ...
- Unicode String to a UTF-8 TypedArray Buffer in JavaScript
https://coolaj86.com/articles/unicode-string-to-a-utf-8-typed-array-buffer-in-javascript/
- FileMaker Server连接SQL Server测试
用FM测试了一把扫二维码.效果还不错,简单的设置几下就可以上线,使用Iphone扫二维码进行盘点以及更新照片功能.接下来测试下下ODBC连接. FMS连接SQL Server测试 1. 在FMS服务器 ...
- IntelliJ IDEA 版本控制器 - Git
1.下载Git 2.测试Git是否安装成功 3.设置 本机 Git 标识,同时解决未设置标识产生的错误 Successfully created project 'demo' on GitHub, b ...
- C语言：结构体，共用体
结构体: 一个变量,存储不同类型的数据项共用体:一个变量,存储不同类型的数据项,相同的内存位置,存储不同的数据类型 #include <stdio.h> #include <stri ...
- php删除字符串最后一位
一.前言 从数据库中select()读取一对多的信息时,经常需要将取出的数组用某个特定的字符分割,然后拼接成字符串. 常见的语法格式: foreach ($arr as $key => $val ...
- MongoDB Shell 常用操作命令
MonoDB shell命令操作语法和JavaScript很类似,其实控制台底层的查询语句都是用javascript脚本完成操作的. Ø 数据库 1.Help查看命令提示 help db.help ...
- vue2.0过滤器
最近一阶段,项目上比较清闲,有了更多的时间可以研究一下vue了. 这里记录一下关于vue2.0过滤器的学习. vue2.0删除了所有的框架自带的过滤器,也就是说,如果你在vue2.0当中想用过滤器,那 ...