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 ...
随机推荐
- PHP反序列化漏洞学习
serialize:序列化 unserialize: 反序列化 简单解释: serialize 把一个对象转成字符串形式, 可以用于保存 unserialize 把serialize序列化后的字符串变 ...
- [Kubernetes]安装和配置kubectl
安装kubectl 安装kubectl比较简单,几条命令即可(#后面为注释内容): #下载最新版本: curl -LO https://storage.googleapis.com/kubernete ...
- Python3-高阶函数、闭包
一.高阶函数 满足下列条件之一为高阶函数 1.某一函数当作参数传入另一个函数中 2.函数的返回值包含n个函数,n>0 高阶函数示范: def bar(): print 'in the bar ...
- css利用padding百分比实现图片自适应高度
应用场景 宽高比率,实现图片自适应高度,防止图片加载过程高度为0,加载完图片高度撑起,它下面的div抖动问题 重点:CSS百分比padding都是相对宽度计算的 <div class=" ...
- ansible 常见指令表
Play 指令 说明 accelerate 开启加速模式 accelerate_ipv6 是否开启ipv6 accelerate_port 加速模式的端口 always_run any_error ...
- 流形学习（manifold learning）综述
原文地址:https://blog.csdn.net/dllian/article/details/7472916 假设数据是均匀采样于一个高维欧氏空间中的低维流形,流形学习就是从高维采样数据中恢复低 ...
- [Linux]php+apache 和 php+nginx的区别
apache是通过mod_php来解析php nginx是通过php-fpm(fast-cgi)来解析php1. PHP 解释器是否嵌入 Web 服务器进程内部执行mod_php 通过嵌入 PHP 解 ...
- importlib模块
importlib模块 import importlib根据这个字符串来导入这个模块的 a=importlib.import_module('xx.oo')print(a.Person())里面可以传 ...
- Spring通过SchedulerFactoryBean实现调度任务的配置(定时器)
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- 2)实现github自动登陆获取信息
# -*- coding:utf-8 -*- # __author__ = 'lixiang' # 实现github自动登陆和获取数据 import requests from bs4 import ...