左侧菜单

<!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. php修改指定文件的指定内容

    <?php $origin_str = file_get_contents('路径/文件.txt'); $update_str = str_replace('qwe=0', 'qwe=1', $ ...

  2. HTML 5 服务器发送事件

    接收 Server-Sent 事件通知 EventSource 对象用于接收服务器发送事件通知: 实例 var source=new EventSource("demo_sse.php&qu ...

  3. js的关联数组

    我自己感觉js是不支持关联数组的,只有索引数组.想要实现js关联数组的效果,就使用js的对象,使用键值对.如果对数组动态处理用push函数,取值用pop函数.此外,对数组操作有几个比较好的函数,joi ...

  4. 数组API

    1.数组的创建 var arrayObj = new Array();//创建一个默认数组,长度是0 var arrayObj = new Array(size);//创建一个size长度的数组,注意 ...

  5. MyEclipse tomcat7.x 自定义项目部署路径

  6. 【iCore3 双核心板_FPGA】实验二十四：Niosii——SDRAM读写实验

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

  7. php读取文件里面的数组做为配置文件

    可能大家也都见过很多开源的产品,大多它们的配置文件都存放在一个单独的文件中,而这个文件里只存放了一个数组,其实这里运用了一个PHP的小技巧,就是可以将文件包含进来,并且赋值给一个变量,这个变量就具有了 ...

  8. 实现服务器端与客户端的高频实时通信 SignalR(2)

    说明:本篇文章与上篇文章 实现服务器端与客户端的实时通信 SignalR(1) 基本代码类似,只是做了些处理 高频 的改动. 一.本文出处:SignalR 实例介绍 (建议看原著里面有DEMO下载) ...

  9. http://highscalability.com/blog/2015/5/18/how-mysql-is-able-to-scale-to-200-million-qps-mysql-cluster.html

    http://highscalability.com/blog/2015/5/18/how-mysql-is-able-to-scale-to-200-million-qps-mysql-cluste ...

  10. 以一则LUA实例说明敏捷开发中“分离构造和使用”原则

    分离构造和使用 构造含义是功能的实现, 此功能是一个定义明确的处理过程, 开放出明确的接口给调用者使用. 则使用者可以直接调用接口进行使用, 但是使用者需要搞清楚, 那些是构造, 那些是使用. 不要再 ...