今天要说一个神奇的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. android 98 MediaPlayer+SurfaceView播放视频

    package com.itheima.videoplayer; import java.io.IOException; import android.media.MediaPlayer; impor ...

  2. 深入理解计算机系统第二版习题解答CSAPP 2.3

    填写空白.单字节可以用两个十六进制数表示. 十进制 二进制 十六进制 0 0000 0000 0x00 167 1010 0111 0xA7 62 0011 1110 0x3E 188 1011 11 ...

  3. 简单的实现QQ通信功能（二）

    第二部分:功能需求以及大体思路 一:功能需求: 1. 角色:登录用户. 2. 登录: (1)检查用户名和密码是否正确,正确登录成功,否则提醒用户名或密码错误. (2)登录时可以选择登录状态,送入数据库 ...

  4. Vivado学习笔记_002

    经过几天的试用逐渐熟悉了vivado,和ISE相比vivado确实有了很多改良. 发现了以下几个特点:   1.数据格式统一了 在以往的设计中,保存数据的格式非常多.ISE有很多种格式的文件,在tra ...

  5. FPGA异步时钟设计中的同步策略

    1 引言    基于FPGA的数字系统设计中大都推荐采用同步时序的设计,也就是单时钟系统.但是实际的工程中,纯粹单时钟系统设计的情况很少,特别是设计模块与外围芯片的通信中,跨时钟域的情况经常不可避免. ...

  6. HDU-1031(水题)

    Design T-Shirt Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) P ...

  7. hbuilder用自己的服务

    2016-03-10 以后写测试demo用Sublime3 http://docs.emmet.io/cheat-sheet/ 更多炫酷信息和emmet语法请参见: 视频demo 语法文档 2016- ...

  8. 几个MVC属性

    1   用于显示提示字符串 [Required(ErrorMessage="请输入类型名称")] public string ArticleTypeName { get; set; ...

  9. 总结Qt中经常出现的一些问题

    1.Qt中用高版本打开低版本的工程 编译时出现错误 : C1189: #error :  "This file was generated using the moc from 4.7.0. ...

  10. HTML_常见命令学习笔记

    1. java类中的这段代码 out.println(" <div class='line'>"); out.println(" <div align= ...