左侧菜单

<!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. Linux内核总结

    1.文件系统就是数据的存储结构,不要以为你的硬盘存储东西理所当然,没有文件系统,你存的只是0010101101100 2.内存管理是计算机运行时内存的分配和使用. 3.进程管理就是说每次执行一个程序都 ...

  2. IOS第二天多线程-03对列组合并图片

    ********* // 2D绘图 Quartz2D // 合并图片 -- 水印 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *) ...

  3. Mongo中append方法使用

    在MongoDB的官网已经很详细的介绍了各种客户端的使用,其中也包括java的,在此,仅对几个比较疑惑的地方做个标注: (1).如何向db中添加collection? 如果在api文档中找不到答案,那 ...

  4. 限制EditText只能输入小数点后两位

    设置EditText只能输入小数点后两位,在价格等有限制的输入时特别有效 TextWatcher textWatcher = new TextWatcher() { @Override public ...

  5. Ffmpeg

    Ffmpeg <?php $movefile = "./4.mp4"; $mov = new ffmpeg_movie($movefile); printf("fi ...

  6. yield return的用法简介

    使用yield return 语句可一次返回一个元素. 迭代器的声明必须满足以下要求: 返回类型必须为 IEnumerable.IEnumerable<T>.IEnumerator 或 I ...

  7. ant copy file

    <project name="selftask" default="docopy" basedir="."> <descr ...

  8. 8 ways rich people view the world differently than the average person

    Self-made millionaire Steve Siebold spent 26 years interviewing some of the wealthiest people in the ...

  9. 《Linux内核分析》第四周 扒开系统调用的“三层皮”

    [刘蔚然 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] WEEK FOUR( ...

  10. 安装LNMP之后出现 Access denied.解决方法

    权限问题, 执行 sudo chown -R www:www /home/wwwroot