左侧菜单

<!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. cat 显示指定行

    [一]从第3000行开始,显示1000行.即显示3000~3999行 cat filename | tail -n +3000 | head -n 1000 [二]显示1000行到3000行 cat ...

  2. [转] - MC、MC、MCMC简述

    贝叶斯集锦(3):从MC.MC到MCMC 2013-07-31 23:03:39 #####一份草稿 贝叶斯计算基础 一.从MC.MC到MCMC 斯坦福统计学教授Persi Diaconis是一位传奇 ...

  3. jQuery设计思想之取值和赋值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. PLSQL Developer的使用

    登陆服务器 除了 sys 用户登陆之外,其他都都选Normal 新建sql 窗口 编写执行sql语句 设置字体.颜色 工具——首选项——用户界面——字体——选择 工具——首选项——用户界面——编辑器— ...

  5. Windows7如何安装Sqlite3

    Sqlite官网地址:http://www.sqlite.org/ Sqlite3文件下载: 1.下载 sqlite-dll-win32-x86-3140100 2.下载 sqlite-tools-w ...

  6. GDC2016 Epic Games【Bullet Train】 新风格的VR-FPS的制作方法

    追求“舒适”和“快感”的VR游戏设计方法   http://game.watch.impress.co.jp/docs/news/20160318_749016.html     [Bullet Tr ...

  7. C#常用命名空间

    MSDN上的C#.NET Framework类库文档目录树,本人觉得有点不得要领,于是参考搜到的结果简单整理如下: 一.基础命名空间 System 处理内建数据.数学计算.随机数的产生.环境变量.垃圾 ...

  8. OpenGL问题拾遗

    1 OpenGL设置好纹理以后显示不出来,显示为黑色 纹理默认会使用 mipmap .如果没有修改filter选项,或没有指定其他level的mipmap数据,就会显示不出来

  9. Eclipse创建java web工程配置Tomacat和JDK 【转】

    在学习AJAX过程中,还用Intellij就有点老旧了,这是后装个Eclipse时,发现这个配置也很头疼,现在就叫你如何创建一个web工程,同时叫你配置Eclipse. 一.创建一个web工程 1.打 ...

  10. MYSQL中创建存储过程实现向表中循环插入数据

    首先在test数据库中先创建一个表test: CREATE TABLE test( ID INT PRIMARY KEY AUTO_INCREMENT ,test_name VARCHAR(20),t ...