今天要说一个神奇的html标签op，静态页下可以配合jquery分别控制每个层的显示/隐藏切换。

如果用动态中使用，用文章id做区分就可以了。

 <html>

 <head>

 <title>多个div独立控制其显示/隐藏</title>

 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

 </head>

 <script>

 $(document).ready(function(){

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

         var op = $(this).attr("op");

         $("#list_"+op).toggle();

     });

 })

 </script>

 <body>

 <div class="info_tit">展开：<span op="1" class="dj">+</span></div>

     <div id="list_1" class="info_main" style="display:none">

         隐藏内容。

     </div>

 <hr />

 <div class="info_tit">展开：<span op="2" class="dj">+</span></div>

     <div id="list_2" class="info_main" style="display:none">

         隐藏内容。

     </div>

 </body>

 </html>

多个div独立控制其显示/隐藏的更多相关文章

  1. angular学习笔记(八)-控制视图显示隐藏

    本篇介绍angular控制视图的显示和隐藏: 通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏: ng-show: 绑定的数据值为true时,显示元素,值为false时,隐 ...

  2. JQuery 控制元素显示隐藏

    JS在浏览器里面做调试的时候,先在浏览器里面找到页面代码加上断点来执行.然后根据执行情况来查找部分变量是否能找到,一点一点的排查内容.可以做筛选条件 部分隐藏.默认让部分条件加上.hide 默认隐藏, ...

  3. python控制窗口显示隐藏

    import win32con # 定义 import win32gui # 界面 import time # 时间 QQ= win32gui.FindWindow("TXGuiFounda ...

  4. jQuery控制TR显示隐藏

    参考链接:http://www.jb51.net/article/51221.htm 通过jQuery的hide和show方法即可.

  5. jQuery动画之显示隐藏动画

    1. 显示动画 以下面一个代码示例: <!doctype html> <html lang="en"> <head> <meta char ...

  6. vue+element-ui实现显示隐藏密码

    <template> <el-form :model="cuser_info" label-width="115px" label-posit ...

  7. jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏

    <!doctype html><html> <head> <meta charset="utf-8"> <title>j ...

  8. python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  9. 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

随机推荐

  1. mysqld --debug-sync

    http://hedengcheng.com/?p=238https://dev.mysql.com/doc/internals/en/debug-sync-facility.html mysqld ...

  2. shared_ptr与weak_ptr的例子

    12.20 编写程序,逐行读入一个输入文件,将内容存入一个StrBlob中,用一个StrBlobPtr打印出StrBlob的每个元素. StrBlob.h #ifndef STRBLOB_H #def ...

  3. linux 定时任务计划

    crond: unrecognized service 无crond解决办法 安装计划任务:yum -y install vixie-cron

  4. 第一章建立asp.net MVC

    第一步 第二步 创建controller 创建View view和controller之间的关系

  5. Mac安装Mysql过程

    1.Mysql官网下载安装包 http://dev.mysql.com/downloads/mysql/ 选择Mac OS X 10.10 (x86, 64-bit), DMG Archive版本下载 ...

  6. print之模块化

    这里参考特权同学的模块化思想,将常用的print等任务模块化,便于直接调用,提高代码的效率和易读性.现转载之,以供日后的学习和工作参考. print模块参考代码如下: //============== ...

  7. Java类加载及实例化的调用顺序

    标题起得略拗口,大概意思就是说在一个Java类中,域和构造方法的调用顺序. 1. 没有继承的情况 单独一个类的场景下,初始化顺序为依次为 静态数据,继承的基类的构造函数,成员变量,被调用的构造函数. ...

  8. Magento 使用心得

    Modules->模块 Controller->控制器 Model->模型 Magento是这个星球上最强大的购物车网店平台.当然,你应该已经对此毫无疑问了.不过,你可能还不知道,M ...

  9. android测试分析1

    Android测试框架,开发环境中集成的一部分,提供一个架构和强有力的工具 可以帮助测试你的应用从单元到框架的每个方面. 测试框架有这些主要特征: 1.Android测试组件基于Junit.你可以使用 ...

  10. hdoj1325 Is It A Tree?

    Is It A Tree?题目链接 题意: 多组测试数据, 每组数据有多个数对, 表示一条有向边(即第一个数是第二个数的父节点), 以 0,0 为一组测试数据结束标志.当输入-1,-1时测试结束. 从 ...