javascript 左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.item .header{
height: 35px;
background-color: #2459a2;
color: white;
line-height: 35px; /*放置垂直*/ }
</style>
</head>
<body>
<div style="height: 48px"></div> <div style="width: 300px">
<div class="item">
<div id='i1' class="header" onclick="ChangeMenu('i1')">菜单一</div>
<div class="content">
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
</div>
</div>
<div class="item">
<div id = 'i2' class="header" onclick="ChangeMenu('i2')">菜单二</div>
<div class="content">
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
</div>
</div>
<div class="item">
<div id = 'i3' class="header" onclick="ChangeMenu('i3')">菜单三</div>
<div class="content">
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
</div>
</div> </div> <!--修改菜单功能-->
<script>
function ChangeMenu(mid) {
var current_header = document.getElementById(mid); //当前头部
console.log(current_header);
var current_base_header = current_header.parentElement.parentElement
console.log(current_base_header);
var current_list = current_base_header.children;
for(var i=;i<current_list.length;i++){
var current_item = current_list[i];
current_item.children[].classList.add("hide");
}
current_header.nextElementSibling.classList.remove('hide')
}
</script>
</body>
</html>
javascript 左侧菜单的更多相关文章
- JavaScript内容梳理 示例之模态对话框 示例之全选和反选以及取消 示例之后台管理左侧菜单
<!DOCTYPE html> <!--示例之模态对话框--> <html lang="en"> <head> <meta c ...
- JavaScript目录菜单滚动反显组件的实现
JavaScript目录菜单滚动反显组件,有以下两个特点 每个导航菜单项(nav)对应页面一个内容区域(content) 滚动页面到特定内容区域(content)时,对应的菜单会自动切换,一般会添加一 ...
- LayUI左侧菜单无法保持选中状态
1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图 但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...
- 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项
权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...
- JS练习题（左侧菜单下拉+好友选中）
题一.左侧菜单下拉 做题思路:先做菜单和子菜单,把子菜单默认隐藏.再用JS调样式. <style type="text/css"> *{ margin:0px auto ...
- 第一百四十八节，封装库--JavaScript，菜单切换
第一百四十八节,封装库--JavaScript,菜单切换 首先在封装库封装点击切换方法 /** dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环 ...
- ace admin 左侧菜单定位
后台模版来自:Ace Admin http://ace.jeka.by/form-elements.html 左侧菜单,通过js根据url来判断显示哪块 window.location.pathnam ...
- jquery实现左侧菜单 效果
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- python : jquery实现左侧菜单
左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
随机推荐
- suse 11 sp4 bond 网卡 mode0模式
开启网卡: ifocnfig eth1 up 点亮网卡ethtool eth1 db2:~ # cat /etc/sysconfig/network/ifcfg-bond0 DEVICE='bond0 ...
- 【BZOJ 1588】 [HNOI2002]营业额统计
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每天的最小波动值指的是和之前所有天的差值的绝对值中的最小值. 用set.的lower_bound函数. 每次找和他差值最小的数字就好 ...
- Mysql学习总结（20）——MySQL数据库优化的最佳实践
1)谨慎而有效地使用索引 选择合理的索引(前缀性及可选性).删除没有用的索引. 2)使用规范化,但不要使用过头 规范化(至少是第三范式)是一个易于理解且标准的方法.然而,在有些情况下,你可能希望违反这 ...
- windos环境python3.5安装 paramiko
一.执行命令pip install paramiko,情况如下: C:\Users\ZFH>pip install paramikoCollecting paramiko Downloadin ...
- ASP.NET-本地化、全球化
在<system.web>中加入一个全球化的标识,网站就可以自适应全球化了 也可以将出错信息全球化 上面的这种方式测试过对google浏览器好像没用,但是对IE内核的是可行的,可能goog ...
- 【linux驱动分析】misc设备驱动
misc设备驱动.又称混杂设备驱动. misc设备驱动共享一个设备驱动号MISC_MAJOR.它在include\linux\major.h中定义: #define MISC_MAJO ...
- less03 混合
less //基本混合 .font_hn{ color: red; font-family: microsoft yahei, "黑体", Arial, Simsun, " ...
- P 值（p value）与统计检验
P 值是最常用的一个统计学指标,几乎统计软件输出结果都有P值. 统计学的观点,超过一定基准(比如 5%,其实是低于5%),就不能简单地认为这是偶然事件了,而是受到了外在的影响. 一般而言,为了确定从样 ...
- java9新特性-11-String存储结构变更
1. 官方Feature JEP254: Compact Strings 2. 产生背景 Motivation The current implementation of the String cla ...
- CentOS7.3 下开放防火墙的端口
CentOS 7.3默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1:关闭firewall: systemctl stop firewalld.service system ...