使用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>

使用jQuery实现类似开关按钮的效果的更多相关文章
- jquery另外一种类似tab切换效果
简要:最近做项目一些效果不能用淘宝kissy框架 所以代码得自己写啊 网上当然有很多组件 但是用他们的代码很多(有的是我不需要的代码) 且还要看API 还不如自己动手写个简单一个,是这么一种简单的效果 ...
- 深入学习jQuery的三种常见动画效果
× 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...
- 学习使用 jQuery & CSS3 制作照片堆栈效果
在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...
- 基于CSS3新属性Animation及transform实现类似翻书效果
注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...
- 15个最佳jQuery的翻页书效果的例子
在这里,你会发现15的jQuery的翻页书的插件,提供了良好的页面翻转的经验,并帮助创建类似书本的效果. jQuery的增添了一道亮丽的过渡到实际的页面在一本书或杂志HTML5. 1. BookBlo ...
- js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- jQuery UI -- Repeater & 手风琴(Accordion)效果
jQuery UI -- Repeater & 手风琴(Accordion)效果 很简单的范例,完全不用写程序 直接套用就能做! 但是,基础不稳的人,连「复制贴上」直接套用, 对您而言,都困难 ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- jQuery图片旋转展示收缩效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Radius 远程用户拨号认证系统
RADIUS 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . RADIUS:Remote Authentication Dial In User Service,远程用户拨号认证系 ...
- ExtJS学习之路第三步:理解引擎之下,ExtJS4中的类
写写就发现,有些代码不查查源头,不明白是怎么回事?搜到这篇文章觉得还是收益匪浅,更容易读懂代码. Classes in Ext JS 4: Under the hood Countdown to Ex ...
- java笔记--使用线程池优化多线程编程
使用线程池优化多线程编程 认识线程池 在Java中,所有的对象都是需要通过new操作符来创建的,如果创建大量短生命周期的对象,将会使得整个程序的性能非常的低下.这种时候就需要用到了池的技术,比如数据库 ...
- [Effective JavaScript 笔记]第53条:保持一致的约定
对于api使用者来说,你所使用的命名和函数签名是最能产生普遍影响的决策.这些约定很重要具有巨大的影响力.它建立了基本的词汇和使用它们的应用程序的惯用法.库的使用者必须学会阅读和使用这些.一致的约定可以 ...
- 在VMware上面安装Solaris 10
导读 Oracle Solaris 11 是世界上最先进的企业操作系统,提供安全.速度.简单的企业云环境和DevOps.在这篇文章中我们将使用Solaris 10版本,但您可以按照同样的步骤,来安装刚 ...
- mac安装django1.5.4
http://www.iwangzheng.com/ 1.下载安装程序 打开终端输入以下命令 $ wget http://www.djangoproject.com/m/releases/1.5/Dj ...
- C#开发实例 键盘篇
键盘的操作控制: 键盘和鼠标一样是重要输入设备的一部分.开发过程中,会涉及到很多的键盘操作控制. 2.1获取键盘信息 ①获取组合键 Windows中有很多默认的组合键,如Ctrl+v,Ctrl+A.本 ...
- Android 中 设置TextView垂直滚动
布局文件 android:scrollbars="vertical" android:singleLine="false" 代码文件 ctl_tv_conten ...
- 【云计算】开源的Docker Registry WebUI
kwk/docker-registry-frontend Code Issues 9 Pull requests 6 Wiki ...
- python安装问题
安装MinGW之后 出现.. 解决方案 ================