python : HTML+CSS (左侧菜单)
左侧菜单
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<style>
.hide{
display: none;
}
.menu .head{
height:38px;
background-color: #2459a2;
line-height: 38px;
}
</style>
</head>
<body>
<div style="height: 48px ;border: 1px solid red"></div>
<div style="width:300px ;border: 1px solid red ">
<div class="menu">
<div id='a1' class="head " onclick="caidan('a1')">菜单1</div>
<div class="conent">
<div clas="item">内容1</div>
<div clas="item">内容1</div>
<div clas="item">内容1</div>
</div>
</div> <div class="menu">
<div id='a2' class="head " onclick="caidan('a2')">菜单2</div>
<div class="conent hide">
<div clas="item">内容2</div>
<div clas="item">内容2</div>
<div clas="item">内容2</div>
</div>
</div> <div class="menu">
<div id='a3' class="head" onclick="caidan('a3')">菜单3</div>
<div class="conent hide">
<div clas="item">内容3</div>
<div clas="item">内容3</div>
<div clas="item">内容3</div>
</div>
</div> <div class="menu">
<div id='a4' class="head" onclick="caidan('a4')">菜单4</div>
<div class="conent hide">
<div clas="item">内容4</div>
<div clas="item">内容4</div>
<div clas="item">内容4</div>
</div>
</div> </div>
<script> function caidan(nod) {
var head=document.getElementById(nod);
curr_meu=head.parentElement.parentElement.children;
for (var i=0; i<curr_meu.length; i++){
var item_list=curr_meu[i];
item_list.children[1].classList.add('hide');
}
head.nextElementSibling.classList.remove('hide')
}
</script>
</body>
</html>
左侧菜单
python : HTML+CSS (左侧菜单)的更多相关文章
- python : jquery实现左侧菜单
左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
- python :页面布局 ，后台管理页面之左侧菜单跟着滚动条动
左侧菜单跟着滚动条动 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...
- 使用layui-tree美化左侧菜单，点击生成tab选项
layui-tree美化左侧菜单 html <div class="layui-side layui-bg-black"> <div class="la ...
- React+Ant Design设置左侧菜单导航路由的显示与隐藏（与权限无关）
最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...
- LayUI左侧菜单无法保持选中状态
1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图 但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...
- 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项
权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...
- JS练习题（左侧菜单下拉+好友选中）
题一.左侧菜单下拉 做题思路:先做菜单和子菜单,把子菜单默认隐藏.再用JS调样式. <style type="text/css"> *{ margin:0px auto ...
- 【jeasyui5】样式：调整页面显示的顶部菜单和左侧菜单
1.顶部菜单修改:修改index2.js里面的InitTopMenu方法,将icon +2 2.左侧菜单宽度调整: 修改index.html,加上width:170的定长 <!-- 左侧菜单 - ...
- 翻遍互联网都找不到的解决方案,一行代码轻松实现 Gitbook 默认折叠左侧菜单效果
Gitbook 是一款产品文档构建工具,也可以用于构建个人博客,默认情况下电脑端访问时左侧菜单是展开状态,可偏偏有人想要实现默认折叠效果,于是诞生了这篇文章! 善良的我选择帮助别人 可能是网上关于 G ...
随机推荐
- ubuntu上安装Eclipse时遇到的一个错误
A Java Runtime Environment (JRE) or Java Development Kit (JDK)must be available in order to run Ecli ...
- Nginx localtion匹配规则
mark:2016年05月25日13:20:54 (存手打,拒绝转载) 一.location分为 普通location 和 正则location 只有带有 "~" 或者" ...
- C# 路径
一.根目录 .// 或者直接给出文件名称,是找根目录的路径 如:path = "test.xml" 与 path = ".//test.xml"是一个意思 二. ...
- 服务器（Liunx）打包发布java web工程
Liunx服务器上打包发布web工程(开发工具Idea) 1.首先使用Idea自带的打包功能(点击package打包) 2.然后链接到服务器(我这里用的是Xshell链接工具) 3.将打好的war包传 ...
- 《UML大战需求分析》阅读笔记01
在刚学习软件开发的课程时,首先学习了UML设计,但只是学习了基本的语法,虽然在学期通过课堂练习进行了实践,但并没有真正理解其中作用.为了进一步的理解UML的用法,我阅读了<UML大战需求分析&g ...
- 从.NET和Java之争谈IT这个行业[转]
一.有些事情难以回头 开篇我得表名自己的立场:.NET JAVA同时使用者,但更加偏爱.NET.原因很简单 1.NET语言更具开放性,从开源协议和规范可以看出; 2.语言更具优势严谨; 3.开发工具V ...
- Json与类对象转换
Json在js,jquery中可以直接使用,比如下串: { "from":"en" ,"to":"zh" ," ...
- Mac OS 电脑播放 iPhone音乐
http://apple.stackexchange.com/questions/6173/can-i-play-audio-from-my-iphone-on-my-mac Simple, and ...
- HTML中div以及span等元素获取焦点
在js操作html的时候如果想让某个元素获取焦点,一般去掉用其.focus()方法. 但如果为非表单元素的div span等,必须要添加属性tabIndex=1这个属性后调用.focus()方法即可! ...
- Pivot C# WPF 代码添加PivotItem
PivotItem new_PivotItem = new PivotItem();//新建Pivotitem ListView new_ListView = new ListView();//新建l ...