jQuery实现点击标题输入详细信息


Posted in Javascript onApril 16, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
.divFrame{ width:260px; border:1px solid #666; font-size:10px } 
.divTitle{ background-color:#eee; padding:5px} 
.divContent{ padding:5px; display:none} 
.divTip{ width:244px; border:2px solid red; padding:8px; font-size:9px; margin-top:5px; display:none} 
.txtCss{ border:1px solid #ccc} 
.divCurrColor{ background-color:Red} 
.divBtn{ padding-top:5px} 
.divBtn.btnCss{ border:solid 1px #535353; width:60px} 
</style> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$('.divTitle').click(function () { 
$('.divTitle').addClass('divCurrColor') 
.next('.divContent').css('display', 'block') 
$('#Button1').click(function () { 
var txtvalue = $('#Text1').val(); 
var radiovalue = $('#Radio1').is(':checked')?"男" : "女"; 
var checkvalue = $('#Checkbox1').is(':checked')?"已婚" : "未婚"; 
$('#divTip').css('display','block').html(txtvalue + "<br/>" + radiovalue + "<br/>" + checkvalue); 
}) 

}) 
}) 
</script> 
</head> 
<body> 
<div class="divFrame"> 
<div class="divTitle">请输入您的信息</div> 
<div class="divContent"> 
姓名:<input id="Text1" type="text" class="txtCss" /><br /> 
性别:<input id="Radio1" name="rdoSex" type="radio" value="男"/>男 
<input id="Radio2" name="rdoSex" type="radio" value="女" />女<br /> 
婚否: <input id="Checkbox1" type="checkbox" /> 
<div class="divBtn"> 
<input id="Button1" type="button" value="提交" class="btnCss""/> 
</div> 
</div> 
</div> 
<div id="divTip" class="divTip"> </div> 
</body> 
</html>

程序运行实现以下效果:

jQuery实现点击标题输入详细信息

点击标题,输入详细信息,点击确定按钮,完成

jQuery实现点击标题输入详细信息

Javascript 相关文章推荐
浏览器常用高宽的jquery插件
Feb 24 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
微信小程序实现搜索功能
Mar 10 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 #Javascript
js变换显示图片的实例
Apr 16 #Javascript
在jQuery中 常用的选择器介绍
Apr 16 #Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 #Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 #Javascript
基于jQuery中对数组进行操作的方法
Apr 16 #Javascript
js中 关于undefined和null的区别介绍
Apr 16 #Javascript
You might like
php数字游戏 计算24算法
2012/06/10 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
python中import与from方法总结(推荐)
2019/03/21 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
python sorted方法和列表使用解析
2019/11/18 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
总经理职责
2013/12/22 职场文书
产品质量承诺书范文
2014/03/27 职场文书
活动总结书
2014/05/08 职场文书
支教个人总结
2015/03/04 职场文书
创业计划书之家教中心
2019/09/25 职场文书
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python