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 相关文章推荐
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 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
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
Position属性之relative用法
2015/12/14 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
办公室文秘岗位职责
2013/11/15 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
社团活动总结书
2014/06/27 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
人事任命通知书
2015/04/21 职场文书
硕士学位申请报告
2015/05/15 职场文书
大学同学聚会感言
2015/07/30 职场文书