左侧菜单

<!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 (左侧菜单)的更多相关文章

  1. python : jquery实现左侧菜单

    左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  2. python :页面布局 ，后台管理页面之左侧菜单跟着滚动条动

    左侧菜单跟着滚动条动 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...

  3. 使用layui-tree美化左侧菜单，点击生成tab选项

    layui-tree美化左侧菜单 html <div class="layui-side layui-bg-black"> <div class="la ...

  4. React+Ant Design设置左侧菜单导航路由的显示与隐藏（与权限无关）

    最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...

  5. LayUI左侧菜单无法保持选中状态

    1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图 但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...

  6. 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项

    权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...

  7. JS练习题（左侧菜单下拉+好友选中）

    题一.左侧菜单下拉 做题思路:先做菜单和子菜单,把子菜单默认隐藏.再用JS调样式. <style type="text/css"> *{ margin:0px auto ...

  8. 【jeasyui5】样式：调整页面显示的顶部菜单和左侧菜单

    1.顶部菜单修改:修改index2.js里面的InitTopMenu方法,将icon +2 2.左侧菜单宽度调整: 修改index.html,加上width:170的定长 <!-- 左侧菜单 - ...

  9. 翻遍互联网都找不到的解决方案,一行代码轻松实现 Gitbook 默认折叠左侧菜单效果

    Gitbook 是一款产品文档构建工具,也可以用于构建个人博客,默认情况下电脑端访问时左侧菜单是展开状态,可偏偏有人想要实现默认折叠效果,于是诞生了这篇文章! 善良的我选择帮助别人 可能是网上关于 G ...

随机推荐

  1. odoo 动态创建字段的方法

    动态创建字段并非一个常见的的需求,但某些情况下,我们确实又需要动态地创建字段. Odoo 中创建字段的方法有两种,一种是通过python文件class中进行定义,另一种是在界面上手工创建,odoo通过 ...

  2. php循环删除文件目录及文件

    删除文件及目录: //循环删除目录和文件函数 function delDirAndFile( $dirName ) { if ( $handle = opendir( "$dirName&q ...

  3. [转]理解Linux系统中的load average

    转自:http://heipark.iteye.com/blog/1340384 谢谢,写的非常好的文章. 一.什么是load average linux系统中的Load对当前CPU工作量的度量 (W ...

  4. echarts一个页面动态加载两张不同图表数据

    参考 http://www.stepday.com/topic/?877 http://blog.csdn.net/for_china2012/article/details/45167161 // ...

  5. bzoj4457: 游戏任务--双层01背包

    这题和NOIP的金明的预算方案(?)很像,只不过附件的数量增多了 如果对主件进行一次01背包,再套一层附件的01背包O(n4)肯定会爆.. 所以我们可以先预处理出,对于每个主件,花的时间为k的情况下, ...

  6. websocket总结

    一.WebSocket简介 WebSocket  protocol是HTML5一种新的协议,WebSocket 是目前唯一真正实现全双工通信的服务器向客户端推送的互联网技术.WebSocket的出现使 ...

  7. 我的web框架设计

    做了很久的web开发,学了webform和mvc自己总结了,觉得当下的构架还是有改进的可能的. 其实首先说下我的一些认识(个人认知,欢迎讨论,谢绝砸砖). 我觉得对计算机和数据的操作,本身就是一个单向 ...

  8. Ubuntu 常用工具、指令安装

    修改source list,使用阿里云的软件源 sed -i s/archive.ubuntu.com/mirrors.aliyun.com/g /etc/apt/sources.list sed - ...

  9. Linux下安装vsftpd

    一.安装vsftpd及相关依赖包 #vsftpd安装程序 yum install vsftpd #vsftpd虚拟登陆账户必要依赖包 yum install pam* db4* 安装完之后,vsftp ...

  10. zepto源码--核心方法9（管理包装集）--学习笔记

    今天介绍的是与子元素相关的函数,children, find, contents children 从源码来看,主要是调用过滤函数filtered对遍历整个包装集返回的children进行过滤. 仔细 ...