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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
javascript 实现map集合
Apr 03 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
js 函数的副作用分析
2011/08/23 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python获取从命令行输入数字的方法
2015/04/29 Python
Python实现基本线性数据结构
2016/08/22 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
详解python statistics模块及函数用法
2019/10/27 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
python 实现简易的记事本
2020/11/30 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
管理学专业个人求职信范文
2013/12/13 职场文书
老师给学生的表扬信
2014/01/17 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫