左侧菜单

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.         "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.     <title>Title</title>
  6.     <style>
  7.           .header{
  8.             background-color: black;
  9.             color: wheat;
  10.         }
  11.         .content{
  12.             min-height: 50px;
  13.         }
  14.         .hide{
  15.             display: none;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20. <div style="height:400px;width: 200px;border: 1px solid #dddddd">
  21.         <div class="item">
  22.             <div class="header">标题一</div>
  23.             <div id="i1" class="content hide">内容</div>
  24.         </div>
  25.         <div class="item">
  26.             <div class="header">标题二</div>
  27.             <div class="content hide">内容</div>
  28.         </div>
  29.  
  30.         <div class="item">
  31.             <div class="header">标题三</div>
  32.             <div class="content hide">内容</div>
  33.         </div>
  34.     </div>
  35. <script src="jquery-1.12.4.js"></script>
  36. <script>
  37.     $(".header").click(function () {
  38.         $(this).next().removeClass('hide').parent().siblings().find(".content").addClass("hide")
  39. //next获取下一个标签
  40.     })
  41. </script>
  42.  
  43. </body>
  44. </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面向对象、模式与实践》有感（三）

    命令模式: 第一次接触到这个命令模式的时候,感觉它很像一个简化的mvc框架.从不同的路径访问,再由控制器来判断所要调用的具体php文件. <?php class CommandContext{ ...

  2. 数组遍历map和each使用

    <body> <input type="/> <input type="/> <input type="/> </b ...

  3. 20145337 《Java程序设计》第九周学习总结

    20145337 <Java程序设计>第九周学习总结 教材学习内容总结 数据库本身是个独立运行的应用程序 撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增删查找 JDBC可以 ...

  4. 创建一个LinkedList，然后在其中插入多个值，确保每个值都插入到List中间（偶数中间两个数之一，奇数在正中间）

    这是Thinking in java 中的一道题,下面是我的解决方案: package test; import java.util.LinkedList; import java.util.List ...

  5. IOS第一天多线程-02NSThread基本使用

    **** #import "HMViewController.h" @interface HMViewController () @end @implementation HMVi ...

  6. ping & tracert over TCP

    偶然发现还有这样的工具: 通过TCP协议实现ping和tracert. 之前一直苦恼无法通过ping的方式测试被q网站, 现在有了这两个工具后就方便了. [Windows] tcping: http: ...

  7. SQL优化 1

    SQL_ID:fvdwtfv18yy0m 先看看sql的预估执行计划 select * from table(dbms_xplan.display_awr('fvdwtfv18yy0m')); sql ...

  8. Java简单类——双向一对多映射

    class Item { // 父栏目 private int iid ; private String name ; private String note ; private Subitem su ...

  9. controlling the variance of request response times and not just worrying about maximizing queries per second

    http://highscalability.com/blog/2010/11/4/facebook-at-13-million-queries-per-second-recommends-minim ...

  10. Ruby零星笔记

    chomp:去掉字符串末尾的\n或\r chop:去掉字符串末尾的最后一个字符,不管是\n\r还是普通字符 to_s:转换成字符串 to_i:转换成数值 object.nil?:判断是否为空,空返回: ...