左侧菜单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title>Title</title>

    <style>

          .header{

            background-color: black;

            color: wheat;

        }

        .content{

            min-height: 50px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

<div style="height:400px;width: 200px;border: 1px solid #dddddd">

        <div class="item">

            <div class="header">标题一</div>

            <div id="i1" class="content hide">内容</div>

        </div>

        <div class="item">

            <div class="header">标题二</div>

            <div class="content hide">内容</div>

        </div>

        <div class="item">

            <div class="header">标题三</div>

            <div class="content hide">内容</div>

        </div>

    </div>

<script src="jquery-1.12.4.js"></script>

<script>

    $(".header").click(function () {

        $(this).next().removeClass('hide').parent().siblings().find(".content").addClass("hide")

//next获取下一个标签

    })

</script>

</body>

</html>

左侧菜单

python : jquery实现左侧菜单的更多相关文章

  1. python : HTML+CSS (左侧菜单)

    左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  2. jquery实现左侧菜单 效果

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  3. JQuery之左侧菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. jquery左侧菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

    关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...

  6. python :页面布局 ，后台管理页面之左侧菜单跟着滚动条动

    左侧菜单跟着滚动条动 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...

  7. jquery实现全选，取消，反选的功能&实现左侧菜单

    1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  8. 使用layui-tree美化左侧菜单，点击生成tab选项

    layui-tree美化左侧菜单 html <div class="layui-side layui-bg-black"> <div class="la ...

  9. python jquery

    jquery 一.寻找元素(选择器和筛选器) a.选择器 1.基本选择器 1 $("*")  $("#id")   $(".class")  ...

随机推荐

  1. C# 在 vs2010 上开发 ActiveX 控件 【千辛万苦啊~】

    由于B/S项目中需要使用到读卡器的功能,但是由于厂家只有提供一个 读卡的dll,那么怎样能在客户端使用读卡器呢,那么进过一番查找,最总决定使用ActiveX 控件来做.由于是第一次接触到 Active ...

  2. Oracle手工建库

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

  3. php for循环嵌套

    <?php     //2.打印一个50*50的 'o' 的正方形方整, 使用for的嵌套     // oooooo     // oooooo     // oooooo //for循环嵌套 ...

  4. Web前端开发基础 第四课（颜色值）

    颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 前面几个小节中经 ...

  5. JS判断客户端系统 让ipad iphone 等手持设备自动跳到手机版

    if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i))) { location.replace("http:// ...

  6. EDI - Biztalk Sample

    1. EDI Control - Scripting Usage:

  7. javascript基础笔记

    1.获取元素:                 var box=document.getElementById("box");2.改变元素内容:                 b ...

  8. 【iCore3 双核心板】例程二十五：LAN_DNS实验——域名解析

    实验指导书及代码包下载: http://pan.baidu.com/s/1jHlBpqe iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  9. scp使用加密算法报错unknown cipher type

    为了提高scp的传输速度指定了scp的加密算法为arcfour $ scp -c arcfour localFile userName@remoteIP:remoteFile 得到报错unknown ...

  10. 1CSS与文档

    层叠样式表(Cascading Style Sheet,CSS)的功能十分强大,可以影响一个或一组文档的表现. 为什么结构化对HTML来说很重要:1.非结构化页面使得建立内容索引极为困难.2.缺乏结构 ...