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 ...
随机推荐
- typeof操作符在javascript中运用时时页面上的操作数显示
typeof可以告诉我们它的操作数是一个字符串(string).数值(number).函数(function).布尔值(boolean)或对象(object). 1.字符串(string) alert ...
- Struts2的流程（三）
Struts的流程图如下(需要完全理解):
- 一次与iptables有关的Openstack排错
先说下环境: 宿主机A(192.168.1.242)上运行着实例a(192.168.1.176), 宿主机B(192.168.1.56)上运行着实例b(192.168.1.50). 用户说从实例b上t ...
- 故障处理-ORA-00376/ORA-01110
数据库实例启动之后发现,9号数据文件发生故障,file 9 cannot be read at this time, ORACLE Instance ilndb2 (pid = 16) - Error ...
- NEC学习 ---- 模块 - 带点文字链接列表
带点文字链接列表, 实现的效果是, 调整字体大小, 点的位置不会跟着变动. HTML如下: <div class="container"> <div class= ...
- LoadRunner11.00入门教程出现的问题
问题1.打不开浏览器 解决办法:打开浏览器工具--Internet 选项--高级--取消启用第三方浏览器扩展. 顺带解决了,有两个浏览器问题. 两个浏览器:一个是自带的IE,一个是其他软件插件. 解决 ...
- Thinking in Java——笔记(3)
Operator Using Java operators Some operators change the value of an operand. This is called a side e ...
- delete all untracked files
git clean -f git clean -fdx f file d directory x .gitignore
- 文档生成工具 appledoc
参考文章 1.安装: $ git clone git://github.com/tomaz/appledoc.git $ cd appledoc $ sudo sh install-appledoc. ...
- 修改pip源
http://www.cnblogs.com/hushaojun/p/4606986.html mkdir -p ~/.pip/ vi ~/.pip/pip.conf [global] trusted ...