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 ...
随机推荐
- linux 安装常用库
在CentOS安装软件的时候,可能缺少一部分支持库,而报错.这里首先安装系统常用的支持库.那么在安装的时候就会减少很多的错误的出现. [root@bogon 桌面]# yum install -y ...
- [原创]Linux 下 redis 链接一次
刚接触 Linux ,在 Linux 下安装 redis 链接redis 出现了以下问题 Could not connect to Redis at 127.0.0.1:6379: Connecti ...
- 如何在ssh远程linux服务器时不需要输入密码
目的: 期望A服务器在对B服务器执行ssh或者scp等命令的时候不需要输入密码 实现方法: 1.通过安装sshpass服务 2.通过密钥验证的方式 操作过程: 一.通过sshpass的方式达到密码非交 ...
- pandas 8 画图
from __future__ import print_function import pandas as pd import numpy as np import matplotlib.pyplo ...
- Spring学习总结（14）——Spring10种常见异常解决方法
在程序员生涯当中,提到最多的应该就是SSH三大框架了.作为第一大框架的Spring框架,我们经常使用. 然而在使用过程中,遇到过很多的常见异常,我在这里总结一下,大家共勉. 一.找不到配置文件的异常 ...
- Maven项目的坐标GroupId和ArtifactId
GroupId和ArtifactId被统称为“坐标”是为了保证项目唯一性而提出的,如果你要把你项目弄到maven本地仓库去,你想要找到你的项目就必须根据这两个id去查找. GroupId一 ...
- Gcc/MinGW/Cygwin/Msys 分别是什么？
一.GCC的历史 GCC是一个原本用于Unix-like系统下编程的编译器. 不过,现在GCC也有了许多Win32下的移植版本. 所以,也许对于许多Windows开发者来说,GCC还是一个比较陌生的东 ...
- git的学习笔记整理
Git学习较好的网址:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/001373 ...
- jquery实现上下浮动
jquery实现上下浮动: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- PC/H5端各浏览器兼容性问题及解决方案？
概念:所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码解析的差异,造成页面显示效果不统一的情况. 1>不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况 ...