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的 ...
随机推荐
- Java的大内存分页支持
原文:http://kilik.iteye.com/blog/677253 最近在研究java的性能调优,顺手写了一个小程序来测试性能问题.这个程序用来进行矩阵乘法运算,如下: for (int i ...
- C语言强化——排序
1.完成堆排,对比堆排和qsort在排序1亿数的时间差异 #include<stdio.h> #include<time.h> #include<stdlib.h> ...
- [UE4]修改枪支碰撞体
一.Simple Collision:显示简单碰撞体,Comlex Collision:显示复杂碰撞体 二.添加简单和复杂碰撞体 三.自动生成复杂精确的碰撞体
- Java中涉及线程和并发相关的内容
1:线程池 与每次需要时都创建线程相比,线程池可以降低创建线程的开销,这也是因为线程池在线程执行结束后进行的是回收操作,而不是真正的 销毁线程. 2:ReentrantLock ReentrantLo ...
- 汽车车牌JS正则表达式验证(含新能源车牌)
/** * 第一:普通汽车 * 车牌号格式:汉字 + A-Z + 5位A-Z或0-9( 车牌号不存在字母I和O防止和1.0混淆) * (只包括了普通车牌号,教练车,警等车牌号 .部分部队车,新能源不包 ...
- HBase 集群部署
前提条件:hadoop及zookeeper机群已经搭建好. 配置hbase集群步骤: 1.配置hbase集群,要修改3个文件 注意:要把hadoop的hdfs-site.xml和core-site. ...
- jmx - first demo
1. pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww ...
- 【LeetCode】3. 无重复字符的最长子串
给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc&qu ...
- pycharm中导入requests，xmlx等模块的方法。
现在pycharm的功能越来越强大,我们需要什么直接就可以导入: 下面正式开始介绍: 第一步: 先选择左边的:project interpreter ----->再点击后面的绿色的加号. 那 ...
- mySQL InnoDB 的性能问题讨论
https://ncisoft.iteye.com/blog/34676 https://www.douban.com/note/245895324/ MySQL最为人垢病的缺点就是缺乏事务的支持,M ...