左侧菜单

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.         "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.     <title>Title</title>
  6.     <style>
  7.        .hide{
  8.             display: none;
  9.         }
  10.         .menu .head{
  11.             height:38px;
  12.             background-color: #2459a2;
  13.             line-height: 38px;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18. <div style="height: 48px ;border: 1px solid red"></div>
  19. <div style="width:300px ;border: 1px solid red ">
  20.     <div class="menu">
  21.            <div id='a1' class="head "  onclick="caidan('a1')">菜单1</div>
  22.            <div class="conent">
  23.                 <div clas="item">内容1</div>
  24.                 <div clas="item">内容1</div>
  25.                 <div clas="item">内容1</div>
  26.            </div>
  27.     </div>
  28.  
  29.     <div class="menu">
  30.            <div id='a2' class="head "   onclick="caidan('a2')">菜单2</div>
  31.            <div class="conent hide">
  32.                 <div clas="item">内容2</div>
  33.                 <div clas="item">内容2</div>
  34.                 <div clas="item">内容2</div>
  35.            </div>
  36.     </div>
  37.  
  38.     <div class="menu">
  39.            <div  id='a3' class="head"   onclick="caidan('a3')">菜单3</div>
  40.            <div class="conent hide">
  41.                 <div clas="item">内容3</div>
  42.                 <div clas="item">内容3</div>
  43.                 <div clas="item">内容3</div>
  44.            </div>
  45.     </div>
  46.  
  47.     <div class="menu">
  48.            <div id='a4' class="head"  onclick="caidan('a4')">菜单4</div>
  49.            <div class="conent  hide">
  50.                 <div clas="item">内容4</div>
  51.                 <div clas="item">内容4</div>
  52.                 <div clas="item">内容4</div>
  53.            </div>
  54.     </div>
  55.  
  56. </div>
  57. <script>
  58.  
  59.     function caidan(nod) {
  60.         var head=document.getElementById(nod);
  61.         curr_meu=head.parentElement.parentElement.children;
  62.         for (var i=0; i<curr_meu.length; i++){
  63.             var item_list=curr_meu[i];
  64.             item_list.children[1].classList.add('hide');
  65.         }
  66.         head.nextElementSibling.classList.remove('hide')
  67.     }
  68. </script>
  69. </body>
  70. </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. zk 隐藏网页文件后缀

    前台(test.zul): <a label="隐藏地址" href="/Bandbox/test.html"/> web.xml添加 <se ...

  2. c#语句 随堂练习1

    1.请输入两个整数a,b,若a²+b²>100,则打印出a²+b²的结果,否则打印出a+b的结果. 2.有一组函数,y=x(x<1),y=2x-1(1<=x<10),y=3x- ...

  3. JS移动客户端--触屏滑动事件 banner图效果

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  4. Linux_shell脚本_遍历文件夹下所有文件

    参考:lunar1983的专栏 实现:从给定目录树中grep出含制定字符串的行,并给出所在路径 代码如下所示: #!/bin/sh - if [ $# -ne 2 ] then echo " ...

  5. DataTable的一些用法

    手动给DataTable添加数据 DataTable tab = new DataTable(); tab.Columns.Add("id", typeof(int));//添加列 ...

  6. 计算alert弹出框的次数

    (function() { var oldAlert = window.alert, count = 0; window.alert = function(a) { count++; oldAlert ...

  7. 怎么配置Java环境变量？

    右键计算机 -> 属性 -> 高级系统设置 -> 环境变量,   在系统环境变量添加以下三条变量. 1. PATH, 配置JDK命令文件的位置. 输入“%JAVA_HOME%\bin ...

  8. CVTRES : fatal error CVT1100 , fatal error LNK1123:

    CVTRES : fatal error CVT1100: duplicate resource. type:DIALOG, name:901, language:0x0804LINK : fatal ...

  9. Android课程---Android Studio的一些小技巧

    APK瘦身 在Android Studio中我们可以开启混淆,和自动删除没有Resources文件,来达到给APP瘦身的目的,这对于一些维护很久的老项目比较有用,里面有很多无效的Resource, 删 ...

  10. JS开发windows phone8.1系列之2

    http://msdn.microsoft.com/zh-cn/library/windows/apps/dn629636.aspx Windows.Storage.ApplicationData.r ...