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 ...
随机推荐
- 自己编写php框架（一）
这两天一直在琢磨如何做一个php模板,将前台html页面和php代码分割开来.虽然现在市面上有各种各样的php模板,但还是想自己编写一个体验一下. 之前一直写到了将替换完php代码的含有php代码的h ...
- bootstrap学习笔记之三（组件的使用）
bootstrap组件需要引入bootstrap.js才行,当然要引入bootstrap.js首先得引入JQuery. 一.下拉菜单 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另 ...
- SQL存储过程生成顺序编码
一.第一种方式 USE [WJKC]GO/****** Object: StoredProcedure [dbo].[Address_GetCode1] Script Date: 2016/3 ...
- sprintf的缓冲区溢出问题
因为sprintf函数没有参数指定缓冲区的大小,这使得溢出的可能性很大,尤其是遇到 sprintf( buffer, "%s", a ) 如果不知道a的串长,就无法指定安全的缓冲区 ...
- win7安装virtualbox遇到的问题
今天用台式机的时候想装个virtualbox跑centos做测试用,结果centos始终装不上,vbox一直提示无法开启任务.重装vbox,以及手动点击安装xxx.inf文件,都不行. 以前用的win ...
- eclipse安装JS插件
在eclipse中有三种Javascript插件可供选择: JSDT JSEclipse Spket Spket插件安装: 手动安装:到http://www.spket.com/download.ht ...
- oslo.messaging 1.8.0 bug fix and blueprint
1366597 由于amqp_auto_delete可配置,但是NotifierPublisher使用的是没有在配置中获取而使用的默认的False,即非auo_delete,因而在用户配置了amqp_ ...
- yii2知识点详解
yii2错误处理机制: 错误处理器将所有非致命PHP错误转换成可获取异常, 也就是说可以使用如下代码处理PHP错误 use Yii; use yii\base\ErrorException; try ...
- python display color output
起因 在开发项目过程中,为了方便调试代码,经常会向stdout中输出一些日志,默认的这些日志就直接显示在了终端中.而一般的应用服务器,第三方库,甚至服务器的一些通告也会在终端中显示,这样就搅乱了我们想 ...
- 使用Mod_JK链接Apache和Tomcat
There are many potential problems associated with the default configuration of mod_jk. Let's say it ...