转自：http://www.cnblogs.com/linjiqin/p/3148228.html

本案例实现类似开关按钮效果。

页面有下拉列表、文本框、按钮等表单元素，大致实现如下效果：
1、页面一加载时，文本框隐藏，下拉列表显示，按钮值变为“显示文本框”。
2、点击“显示文本框”按钮时，文本框显示，下拉列表隐藏，按钮值变为“显示下拉列表”。
3、点击“显示下拉列表”按钮时，文本框隐藏，下拉列表显示，按钮值变为“显示文本框”。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

 <head>

  <title>hide_or_show.html</title>

 

  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

  <meta http-equiv="description" content="this is my page">

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

 

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

  <script type="text/javascript">

  var i=0; //全局变量，用来控制按钮值

   

  function isShow(){

      //在点击按钮时，初始化为默认值

   //设置select的value值为空的项选中

   $("#city option[value='0']").attr("selected", true);  

   $("#username").val("");

    

   $("#show_text").toggle("fast", function(){

       i++;

       if(i%2==0){ //偶数时

        $("#btnShow").val("显示文本框");

       }else{

        $("#btnShow").val("显示下拉列表");

       }

   });

   $("#show_select").toggle();

  }

   

  //页面加载时，把文本框隐藏起来

  function hide(){

     $("#show_text").hide();

  }

  </script>

 </head>

 

 <body onload="hide()">

  <span id="show_select">

   <select id="city">

      <option value="0">请选择...</option>

      <option value="1">北京</option>

      <option value="2">上海</option>

   </select>

  </span>

   

  <span id="show_text" style="display: inline; ">

   <input id="username" size="20" />

  </span>

   

  <div>

   <input type="button" id="btnShow" onclick="isShow()" value="显示文本框" />

        </div>

 </body>

</html>

使用jQuery实现类似开关按钮的效果的更多相关文章

  1. jquery另外一种类似tab切换效果

    简要:最近做项目一些效果不能用淘宝kissy框架 所以代码得自己写啊 网上当然有很多组件 但是用他们的代码很多(有的是我不需要的代码) 且还要看API 还不如自己动手写个简单一个,是这么一种简单的效果 ...

  2. 深入学习jQuery的三种常见动画效果

    × 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...

  3. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  4. 基于CSS3新属性Animation及transform实现类似翻书效果

    注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...

  5. 15个最佳jQuery的翻页书效果的例子

    在这里,你会发现15的jQuery的翻页书的插件,提供了良好的页面翻转的经验,并帮助创建类似书本的效果. jQuery的增添了一道亮丽的过渡到实际的页面在一本书或杂志HTML5. 1. BookBlo ...

  6. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  7. jQuery UI -- Repeater & 手风琴(Accordion)效果

    jQuery UI -- Repeater & 手风琴(Accordion)效果 很简单的范例,完全不用写程序 直接套用就能做! 但是,基础不稳的人,连「复制贴上」直接套用, 对您而言,都困难 ...

  8. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  9. jQuery图片旋转展示收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. [Asp.net Mvc]通过UrlHelper扩展为js,css静态文件添加版本号

    写在前面 在app中嵌入h5应用,最头疼的就是缓存的问题,比如你修改了一个样式,或者在js中添加了一个方法,发布之后,并没有更新,加载的仍是缓存里面的内容.这个时候就需要清理缓存才能解决.但又不想让w ...

  2. c# 改变图片的大小（w,h）

    本文介绍获取网络上的图片将其大小尺寸改成自己想要的 /// <summary> /// 图片大小裁剪 /// </summary> /// <param name=&qu ...

  3. 一张图解释Hadoop IPC

    基于hadoop2.6.2.... 一张图Server启动,Client访问..... RPC是IPC的一种,IPC还有另外一种LPC,相关请看参考中的3 使用hadoop ipc步骤: 1.定义RP ...

  4. Nginx下安装PIP监控软件

    wget http://pypi.python.org/packages/source/s/setuptools/setuptools-0.6c11.tar.gztar zxvf setuptools ...

  5. [Effective JavaScript 笔记] 第12条：理解变量声明提升

    js支持词法作用域,即除了极少的例外,对变量的引用会被绑定到声明变量最近的作用域中. js不支持块级作用域,即变量定义的作用域并不是离其最近的封闭语句或代码块,而是包含它们的函数. 不了解这个会产生一 ...

  6. MFC加载皮肤 转自：http://www.cctry.com/thread-4032-1-1.html

    VC皮肤库SkinSharp 1.0.6.6的使用: SkinSharp又称Skin#,是Windows环境下一款强大的换肤组件.SkinSharp作为换肤控件,只需要在您的程序中添加一行代码,就能让 ...

  7. Python列表的remove方法的注意事项

    为何没有删除列表中的全部元素? 解释: 按照执行顺序,第一个空格被删除之后,后面的元素会前移(变成['空格','空格','12','23']),指针下一次会指向新列表的第二个元素(即初始状态的第三个空 ...

  8. Django的Context和RequestContext

    参考:http://www.dannysite.com/blog/38/ Django的模板渲染中,Context可以用来传递数据,一个Context是一系列变量和值的集合,它和Python的字典有点 ...

  9. 【转】Linux中如何安装.rpm、.tar、.tar.gz和tar.bz2

    我以下面三个包为例:(三个包都在/etc/opt下)A.example-1.2.3-1.rpmB.example-1.2.3-1.tarC.example-1.2.3-1.tar.gz 1.对于rpm ...

  10. msysgit ls 中文显示

    2013年10月17日 14:54:15 安装了新版的msysgit后,在其自带的 git bash 命令行下就可以输入中文汉字了 但是创建了中文名字命名的文件后,再用 ls 命令查询时会出现乱码的情 ...