今天要说一个神奇的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. mysql 学习心得 [学习]

    http://www.cnblogs.com/lyhabc/p/3822267.html

  2. 自己动手，丰衣足食！一大波各式各样的ImageView来袭！

    工作略忙,一直想自己打造一个开源控件却苦于没有时间,可是这种事情如果不动手就会一直拖下去,于是最近抽时间做了个简单的自定义形状的ImageView控件. 时间紧迫,目前仅支持正六边形.圆形.菱形.椭圆 ...

  3. 编程以外积累： 如何给项目生成类似VS2008的说明文档

    1:[下载] 目前微软提供的官方开源工具 Sandcastle结果跑到项目中一看,抬头就来了这么一段: The Sandcastle CodePlex project is no longer und ...

  4. ls -l命令详解

    输入: ls -l 输出: -rwxr-xr-x root root May : b 第一个字段(1个字符):文件类型 - :普通文件 d:目录文件 b:块设备文件(block) c:字符设备文件(c ...

  5. [转]SharePoint 2010/2013 使用Javascript来判断权限的三种方法

    本文讲述SharePoint 2010/2013 使用Javascript来判断权限的三种方法的实现方式及其优缺点. 1. 根据用户所在的SharePoint组(比如用户在Leader 组才可以使用审 ...

  6. jQuery Validation Plugin学习

    http://blog.csdn.net/violet_day/article/details/14109261 jQuery Validation Plugin Demo 一.默认校验规则 (1)r ...

  7. DI（依赖注入）简单理解 NO1

    依赖注入:目的削减程序的耦合度,达到高内聚/低耦合 常用形式:Interface Driven Design接口驱动,接口驱动有很多好处,可以提供不同灵活的子类实现,增加代码稳定和健壮性等等.通过Io ...

  8. Android colors.xml

    <?xml version="1.0" encoding="utf-8"?><resources> <color name=&qu ...

  9. 使用sqlldr命令导入资料到Oracle数据库表中的示例说明

    CSV: Comma-Separated Values(逗号分隔值)的缩写,是以逗号分隔字段的多行文本文件   sqlldr 是sql*loader的缩写,此工具在安装完整版的Oracle客户端后就有 ...

  10. 利用Highcharts制作web图表学习（一）

    前言:最近项目中需要对数据进行汇总和分析得出柱状图或曲线图这样散装点图,经过学习和测试发现Highchart不错,如果大家项目中需要的话,不妨看看有的例子摘自官网   一.先说说HighCharts的 ...