本实例中，学习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. Android 学习资料收集

    收集整理这份资料灵感来自于 trip_to_iOS, 征得同意引用了该资料的开头描述 收集整理这份资料主要帮助初学者学习 Android 开发, 希望能快速帮助到他们快速入门, 找到适合自己学习资料, ...

  2. Java ThreadLocal

    ThreadLocal类,代表一个线程局部变量,通过把数据放在ThreadLocal中,可以让每个线程创建一个该变量的副本.也可以看成是线程同步的另一种方式吧,通过为每个线程创建一个变量的线程本地副本 ...

  3. iOS之 PJSIP蓝牙外设音频支持

    如题,蓝牙设备作为音频输出,在app中如果包含VoIP那么就要设定当连接蓝牙设备时候是否选择或者支持蓝牙输出 最近在处理一个工单就是公司的voip-app与硬件话机底座联调(蓝牙2.0)坑爹的如果是4 ...

  4. 手机屏幕滑动效果框架——flipsnap

    下午有时间,研究了下手机网页开发方面的内容.其中关于手机手势滑屏操作.发现有比较好的jquery 插件--flipsnap. 官方网站:http://pxgrid.github.com/js-flip ...

  5. 史上最详细“截图”搭建Hexo博客并部署到Github

    http://jingyan.baidu.com/article/d8072ac47aca0fec95cefd2d.html 大家也搭建过博客,很多时候,按着教程来做就可以了,但是我当时为了搭建Hex ...

  6. WPF学习之路（二） XAML

    在WPF中引入了XAML语言,主要用于界面设计,业务逻辑则使用C#实现后台代码,将界面设计与业务逻辑分离 XAML是一种声明式语言,类似XML\HTML 示例: <!--Start Tag--& ...

  7. 去掉字符序列左边和右边的空格 trim()

    str = " ai lafu yo ";str = trim(str); 输出的将是"ai lafu yo"

  8. mac 安装 php nginx mysql

    mac下面安装php nginx mysql根linux下面差不多,建议大家使用brew管理工具包安装. 1,安装homebrew http://brew.sh/index_zh-cn.html 安装 ...

  9. Visual Studio 2012中文旗舰版（序列号和下载地址）

    序列号:YKCW6-BPFPF-BT8C9-7DCTH-QXGWC 链接: http://pan.baidu.com/s/1pLGhDjl 密码: 3udq

  10. Javascript刷新页面的几种方法

    Javascript刷新页面的几种方法: window.navigate(location)location.reload()location=locationlocation.assign(loca ...