左侧菜单

<!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. c#面向对象基础 封装、继承

    一.封装 这是一种隐藏的特性.可以用一个公式来展示类的封装特性: 封装的类=数据  +  对此数据进行的操作(即算法) 通俗的说,封装就是:包起外界不必要知道的东西,只向外界展露可供展示的东西. 在面 ...

  2. Oracle手工建库

    环境准备 手工建库的前提是ORACLE软件已经正确安装到操作系统中,只是需要我们利用ORACLE软件提供的一些工具和脚本来创建一个数据库,创建这个数据库可以运行DBCA工具图形化创建,也可以使用CRE ...

  3. Web前端开发基础 第四课（CSS小技巧）

    水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...

  4. ant学习

    如果在构建文件当中depends后面有多个依赖,而且这多个依赖还相互依赖,那么只会执行被依赖的任务,不会重复执行任务 ant学习

  5. Android课程---Oracle VM VirtualBox出现不能为虚拟机打开一个新任务

    因工作需要在Win7下增添了Win7虚拟系统,随着VirtualBox 4.326的版本更新,用户们也开始升级.一用户在升级后发现原来创建的虚拟机无法打开,提示信息为:不能为虚拟电脑win7打开一个新 ...

  6. IOS第二天多线程-02一次性代码

    ********** #import "HMViewController.h" #import "HMImageDownloader.h" @interface ...

  7. IOS第八天(3:UITableViewController团购, 点击底部代码调整)

    ****代理者的方法中 // 通知页脚视图调整视图显示状态 [footerView endRefresh]; //发送代理通知的类中 /** 视图控制器刷新完成调用方法 */ - (void)endR ...

  8. HDU 1828 Picture（线段树扫描线求周长）

    Picture Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Su ...

  9. php实现实现代码多主从，切换，轮询，健康检查

    现在很多框架现在都提供数据库读写分离,比如CI,TP,YII,一般使用正则表达书判断sql语句是读操作,还是写操作,但是有个缺点,没有给用主动判断,比如写入操作必须去立即读取主数据库的,如果不能立即判 ...

  10. Java初始化生命周期

    package com.init; abstract class Glyph { void draw() { System.out.println("Glyph.draw()"); ...