左侧菜单

<!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. django基于正则的url匹配

    url.py views.py index.html detail.html 访问:

  2. css小记(3)

    1.只有块级元素可以设置背景图,行内元素要变成块级元素才可以:2.盒子不设置宽度,只设置高度,默认为100%,并自适应屏幕大小变化,为这个盒子设置margin可以在保证margin效果的同时默认调整盒 ...

  3. oauth2.0了解

    http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html

  4. 模拟实现ORM实例

    https://git.oschina.net/wenjieyatou/hibernate_OR_Mapping 请参考git代码.基本原理是自己写了一个session,然后用反射机制模拟数据库存储机 ...

  5. lua库函数

    这些函数都是Lua编程语言的一部分, 点击这里了解更多. assert(value) - 检查一个值是否为非nil, 若不是则(如果在wow.exe打开调试命令)显示对话框以及输出错误调试信息 col ...

  6. 执行JDBC的executeUpdate()方法时，报错：数据类型不一致，应为number,但却为binary

    该原因是因为,在拼写update语句的时候将一个number类型的字段的值赋为了null导致的,如果想将一个number类型的字清空,不能使用null,可以使用“”来替代.

  7. sql 数据库 初级 个人学习总结（一）

    数据库个人总结(初级)1.增删改查 insert into 表名 values ('条件','条件2') delete from 表名 where 条件 update 表名 set=条件值 where ...

  8. 4_STL设计理念_算法

    STL算法,容器,迭代器的设计理念1.STL容器通过 类模板 技术,实现 数据类型 和 容器模型的分离:2.迭代器技术 实现了 遍历和操作容器的统一方法3.STL算法设计理念:通过预定义的函数对象和函 ...

  9. 栈的C++实现（数组）——创建-push-pop-top-清空栈-处理栈

    今天学习了利用数组方式的栈的C++实现,这种方式跟指针实现有很多不一样的地方: 栈的指针实现,栈的创建申请头结点,push需要申请新的结点,pop释放结点,这些结点都放在第一个位置,top时,S-&g ...

  10. IOS第一天多线程-04GCD通信

    **** #define HMGlobalQueue dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0) #define HMM ...