快捷導(dǎo)航

jQuery實現(xiàn)點擊標題輸入詳細信息

更新時間：2013年04月16日 14:57:25 作者：

點擊標題，輸入詳細信息，點擊確定按鈕，完成，把不必要的選項隱藏，當用戶真正有需要的時候，在顯示出來

<!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>

程序運行實現(xiàn)以下效果：

點擊標題，輸入詳細信息，點擊確定按鈕，完成

您可能感興趣的文章:

相關(guān)文章

jQuery實現(xiàn)簡單評論區(qū)功能
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單評論區(qū)功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-10-10
jQuery實現(xiàn)tag便簽去重效果的方法
這篇文章主要介紹了jQuery實現(xiàn)tag便簽去重效果的方法,較為詳細的分析了html頁面及js代碼的實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下
2015-01-01
jQuery實現(xiàn)設(shè)置、移除文本框默認值功能
這篇文章主要介紹了jQuery實現(xiàn)設(shè)置、移除文本框默認值功能,本文實現(xiàn)是類似html5 placeholder（空白提示）效果,正常時文本框有提示文字,當文本框獲得焦點時變?yōu)榭瞻?需要的朋友可以參考下
2015-01-01
jQuery實現(xiàn)打開網(wǎng)頁自動彈出遮罩層或點擊彈出遮罩層功能示例
這篇文章主要介紹了jQuery實現(xiàn)打開網(wǎng)頁自動彈出遮罩層或點擊彈出遮罩層功能,涉及jQuery事件響應(yīng)及窗口元素屬性的相關(guān)操作技巧,需要的朋友可以參考下
2017-10-10
jQuery實現(xiàn)table中的tr上下移動并保持序號不變的實例代碼
下面小編就為大家?guī)硪黄猨Query實現(xiàn)table中的tr上下移動并保持序號不變的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
基于jQuery仿淘寶產(chǎn)品圖片放大鏡代碼分享
今天給大家分享一款基于jQuery淘寶產(chǎn)品圖片放大鏡代碼，這是一款基于jquery.imagezoom插件實現(xiàn)的jQuery放大鏡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-09-09
jQuery的animate函數(shù)實現(xiàn)圖文切換動畫效果
animate()在jquery中作為一個方法,可用于創(chuàng)建動畫效果，jquery中的animate()方法讓那個頁面增加了很好的視覺效果
2015-05-05
jquery.qtip提示信息插件用法簡單實例
這篇文章主要介紹了jquery.qtip提示信息插件用法,結(jié)合簡單實例形式分析了該插件用于顯示提示信息的相關(guān)使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2016-06-06
jQuery 跨域訪問解決原理案例詳解
這篇文章主要介紹了jQuery 跨域訪問解決原理案例詳解的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07
jQuery替換節(jié)點用法示例(使用replaceWith方法)
這篇文章主要介紹了jQuery替換節(jié)點的方法,結(jié)合簡單實例形式分析了jQuery使用replaceWith方法替換P標簽顯示內(nèi)容的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2016-09-09