使用jQuery实现类似开关按钮的效果
jQuery 实现 效果 按钮 类似 开关 使用
2023-09-27 14:29:11 时间
本案例实现类似开关按钮效果。
页面有下拉列表、文本框、按钮等表单元素,大致实现如下效果:
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的deferred对象详解
- JQuery: Convert GET URL to POST
- JQuery
- jQuery find() 搜索所有段落中的后代 C# find() 第一个匹配元素 Func 有返回值 Action是没有返回值 Predicate 只有一个参数且返回值为bool 表达式树Expression
- JQuery对 Select 的各种操作,所有代码作者亲测
- 前端基础 -JQuery之 基本过滤选择器
- jQuery技术内幕:深入解析jQuery架构设计与实现原理. 2.5 jQuery.clean( elems, context, fragment, scripts )
- -第3章 jQuery方法实现下拉菜单显示和隐藏
- jQuery 两种方法实现IE10以下浏览器的placeholder效果
- jQuery插件EasyDrag轻松实现JS拖动的效果
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.11 技巧:在页面下方添加footer
- jquery的ajax实现方式
- jquery+ajax实现下拉刷新+上拉加载
- jquery实现提交按钮提示内容不能为空
- 利用jQuery实现ajax下载文件时进度条
- jQuery实现页面锚点滚动效果
- 使用jquery animate实现锚点慢慢平滑滚动效果
- Jquery_类选择器笔记
- javascrit原生实现jquery的append()函数
- jQuery的学习与实战,控制浏览器缩放
- JQuery Dialog 禁用X按钮关闭对话框,-摘自网络
- jQuery UI Widget(1.8.1)工作原理--转载
- Jquery实现checkbox按shift多选
- H5开发:使用H5、CSS、JS、JQUERY实现从本地选择图片、预览图片、上传图片列表
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现