使用jQuery实现类似开关按钮的效果
转自：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>
本案例实现类似开关按钮效果。
页面有下拉列表、文本框、按钮等表单元素，大致实现如下效果：
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>