左侧菜单

<!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. 怎么配置Java环境变量？

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

  2. 管闲事的小明-nyoj51

    描述某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0,1,2,……,L,都种有一棵 ...

  3. level分层次输出内容添加leve

    代码如下:function getSubComments($parent = 0, $level = 0) { $db = &JFactory::getDBO(); $sql = " ...

  4. java final方法的作用

    1. 不想让别人修改方法实现. 2. 在方法调用时使用内嵌调用. 3. 有效的“关闭”动态绑定,这样编译器就可以为final方法调用生成更有效的代码. Java编程思想: “然而,大多数情况下,这样做 ...

  5. 西部数据出现“WD SES Device USB Device”怎么办，而且说明书全是英文。

    您好.wd ses device driver这个驱动程序可以在baidu中输入关键词找到,什么驱动之家.驱动人生之类的专业驱动网站也都是有的. western digital的移动硬盘驱动程序安装步 ...

  6. javascript 与jquery为每个p标签增加onclick方法

    <script type="text/javascript"> window.onload=function(){ var items=document.getElem ...

  7. mac El Capitan 10.11.6

    http://bbs.pcbeta.com/forum.php?mod=viewthread&tid=1702502&authorid=4532202&page=1

  8. GDC2016 [全境封锁]，11个种类5个派系的敌人设计思路

    [汤姆克兰西:全境封锁],11个种类5个派系的敌人设计思路 实现[汤姆克兰西]射击RPG的AI开发   日文链接:http://game.watch.impress.co.jp/docs/news/2 ...

  9. nginx编译安装

    Nginx编译安装 1.nginx官网:http://wiki.nginx.org/Install下载:http://nginx.org/en/download.html 2.编译安装# wget h ...

  10. ModSecurity 白名单设置

    方法一.SecRuleRemoveById 指令:通过Rule ID禁用指定规则 #waf whitelist <LocationMatch .*> SecRuleRemoveById 9 ...