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之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
jQuery实现当按下回车键时绑定点击事件
Jan 28 Javascript
js星星评分效果
Jul 24 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 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
destoon二次开发常用数据库操作
2014/06/21 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
使用js画图之饼图
2015/01/12 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
JavaScript实现三级联动效果
2017/07/15 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
Python中获取网页状态码的两个方法
2014/11/03 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
Python开发的实用计算器完整实例
2017/05/10 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
公务员年总结的自我评价
2013/10/25 职场文书
绩效工资实施方案
2014/03/15 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
营运督导岗位职责
2015/04/10 职场文书
职位证明模板
2015/06/23 职场文书
父亲节感言
2015/08/03 职场文书
python三子棋游戏
2022/05/04 Python
Python数组变形的几种实现方法
2022/05/30 Python