本实例中，学习jQuery的知识，显示与隐藏网页上的div或是span标签。

实际环境中，也许是根据某些条件进行，符合条件时，对某个或是某个div或是span标签时行显示与隐藏。

主要是学习jQuery的函数与语法，在网页中放置一个铵钮，用户点一点隐藏或显示。还放置了一个div标签和一个span标签。

在asp.net mvc环境中进行，在控制中创建一个Action：

接下来创建一个视图(标记1)：

标记2，在网页添加一个铵钮，value为“hide”，说明铵钮当前状态是show。
标记3，添加div和一个span标签。
标记4，引用jQuery类库。
标记5，编写jQuery代码，特别是铵钮click事件：

实时演示：

Div和Span标签显示与隐藏的更多相关文章

  1. "无意义"的div和span标签

    HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器.<div>元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行.如果与 C ...

  2. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

  3. CSS之div和span标签

    div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...

  4. HTML 的 <div> 和 <span> 标签

    这篇文章里会涉及到两个术语,这里先明确一下: 块级元素,block level element 内联元素(或者叫行内元素),inline element 大多数 HTML 元素被定义为块级元素和内联元 ...

  5. div和span标签

    ------------------------ ------------------------ ------------------------ 块级标签独占一行,不和别的标签在同一行显示:行内标 ...

  6. div和span显示在同一行

    div和span标签的区别 div  是块级元素标签,独占一行,后面跟的内容换行显示 span  是内联元素标签,后面可以跟其他显示内容,不独占一行 display属性可以改变内联元素和块级元素的状态 ...

  7. js控制密码的显示与隐藏实例

    原理是建立2个input,一个type是text,一个type是password.在点击按钮时,这两input个的显示状态与val()的值在切换. html: <!DOCTYPE html> ...

  8. xml publisher根据条件显示或隐藏列

     xml publisher根据条件显示或隐藏列 <?if@column:condition? > -- <?end if?> 样例: 依据PROJECT_FLAG标签显示 ...

  9. div、span绑定内容改变事件

    内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法, ...

随机推荐

  1. iOS开发之JSON格式数据的生成与解析

    本文将从四个方面对IOS开发中JSON格式数据的生成与解析进行讲解: 一.JSON是什么? 二.我们为什么要用JSON格式的数据? 三.如何生成JSON格式的数据? 四.如何解析JSON格式的数据? ...

  2. SVProgressHUD进度条蒙版

    GitHub:https://github.com/samvermette/SVProgressHUDSVProgressHUD和MBProgressHUD效果差不多,不过不需要使用协议,同时也不需要 ...

  3. Runnable，Thread实现多线程以及Runnable的同步资源共享

    (一) 实现多线程有两种方式 (1) 继承Thread类,重写run()方法,如以下例子 class MyThread extends Thread{ public void run(){ // } ...

  4. 学习 Docker - 入门

    Docker简介 一种虚拟容器技术. 一种虚拟化分方案: 操作系统级别的虚拟化: 只能运行相同或相似内核的操作系统: 依赖与linux内核特性:Namespace和Cgroups(Control Gr ...

  5. WPF学习之路（十三）URL

    URL一般由三个部分组成,协议.资源所在主机地址.资源路径 WPF中URL同样有三部分组成:pack.authority(application:| siteoforigin:).路径 资源文件 本地 ...

  6. node模块的分类

    模块的分类 1.核心模块 2.文件模块 3.第三方模块(npm安装的) 模块的引用: 1.路径 2.模块名 模块的流程: 1.创建模块:teacher.js 2.导出模块:exports.add=fu ...

  7. CSS3 rgba

    复制粘贴: <!DOCTYPE html > <html > <head> <meta charset="utf-8"> <t ...

  8. centos7 添加图形界面的功能

    一般安装centos最小版的时候默认没有图形界面 需要自己安装 sudo  yum groupinstall "GNOME Desktop" "Graphical Adm ...

  9. HttpModule

    HttpModule是如何工作的 当一个HTTP请求到达HttpModule时,整个ASP.NET Framework系统还并没有对这个HTTP请求做任何处理,也就是说此时对于HTTP请求来讲,Htt ...

  10. Javascript之旅——第七站：说说js的调试

    最近比较吐槽,大家都知道,现在web前端相对几年前来说已经变得很重了,各种js框架,各种面对对象,而且项目多了,就会提取公共模块, 这些模块的UI展示都一样,不一样的就是后台逻辑,举个例子吧,我们做企 ...