使用jQuery实现类似开关按钮的效果
2016-03-19 18:10
696 查看
转自:http://www.cnblogs.com/linjiqin/p/3148228.html
本案例实现类似开关按钮效果。
页面有下拉列表、文本框、按钮等表单元素,大致实现如下效果:
1、页面一加载时,文本框隐藏,下拉列表显示,按钮值变为“显示文本框”。
2、点击“显示文本框”按钮时,文本框显示,下拉列表隐藏,按钮值变为“显示下拉列表”。
3、点击“显示下拉列表”按钮时,文本框隐藏,下拉列表显示,按钮值变为“显示文本框”。
本案例实现类似开关按钮效果。
页面有下拉列表、文本框、按钮等表单元素,大致实现如下效果:
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实现CheckBox全选/全不选/反选
- jQuery插件开发
- Jquery+css实现图片无缝滚动轮播
- jQuery插件AjaxFileUpload实现ajax文件上传
- jQuery扩展插件方法 $.extend()和$.fn.extend()
- jq生成目录文件树jQuery Ztree基本用法
- Jquery 操作RadioButtonList,DropDownList
- jquery中attr和prop的区别分析
- jQuery Ajax 使用 ($.ajax、$.post、$.get)
- jQuery Ajax 使用 ($.ajax、$.post、$.get)
- Html在线编辑器--基于Jquery的xhEditor轻量级编辑器
- jquery的返回顶端的功能实现
- 了解JQuery的事件绑定特性和事件命名空间机制,编写更好、更灵活的事件处理代码
- jQuery中删除节点方法remove()、detach()、empty()分析
- jquery获取复选框被选中的值
- javaScript & jquery完美判断图片是否加载完毕
- 正则表达式的简单语法及常用正则表达式 举例使用jquery获取url指定参数
- jQuery获取建立唯一ID
- JavaScript和jQuery的事件
- JQuery对HTML进行操作