javascript實(shí)現(xiàn)信息的顯示和隱藏如注冊(cè)頁面
更新時(shí)間:2013年12月03日 17:15:46 作者:
信息的顯示和隱藏在某些時(shí)候還是比較使用的,就比如注冊(cè)信息,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以了解下
我們?cè)趯懽?cè)頁面的時(shí)候,必填信息是可見的,可選信息是隱藏的,如果用戶希望填寫,可以單擊“詳細(xì)信息”。
<!-- 下面代碼通過javascript實(shí)現(xiàn)信息的顯示和隱藏 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function $(idvalue){
return document.getElementById(idvalue);
}
function showtext(){
if($('text').style.display == 'none'){
$('text').style.display = '';
}else{
$('text').style.display = 'none';
}
}
</script>
</head>
<body>
<div id="text" style="display:none;">這里是隱藏信息</div>
<button id="morebtn" onclick="showtext();">詳細(xì)信息</button>
</body>
</html>
復(fù)制代碼 代碼如下:
<!-- 下面代碼通過javascript實(shí)現(xiàn)信息的顯示和隱藏 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function $(idvalue){
return document.getElementById(idvalue);
}
function showtext(){
if($('text').style.display == 'none'){
$('text').style.display = '';
}else{
$('text').style.display = 'none';
}
}
</script>
</head>
<body>
<div id="text" style="display:none;">這里是隱藏信息</div>
<button id="morebtn" onclick="showtext();">詳細(xì)信息</button>
</body>
</html>
您可能感興趣的文章:
- 用javascript制作qq注冊(cè)動(dòng)態(tài)頁面
- jsp+dao+bean+servlet(MVC模式)實(shí)現(xiàn)簡單用戶登錄和注冊(cè)頁面
- 使用JSP實(shí)現(xiàn)簡單的用戶登錄注冊(cè)頁面示例代碼解析
- JS實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)的注冊(cè)頁面
- JS一個(gè)簡單的注冊(cè)頁面實(shí)例
- JavaScript 完成注冊(cè)頁面表單校驗(yàn)的實(shí)例
- node.js實(shí)現(xiàn)登錄注冊(cè)頁面
- 原生js驗(yàn)證簡潔注冊(cè)登錄頁面
- js正則表達(dá)式注冊(cè)頁面表單驗(yàn)證
- js當(dāng)前頁面登錄注冊(cè)框,固定div,底層陰影的實(shí)例代碼
- JS當(dāng)前頁面登錄注冊(cè)框,固定DIV,底層陰影的實(shí)例代碼
- php用戶注冊(cè)頁面利用js進(jìn)行表單驗(yàn)證具體實(shí)例
- JS、CSS和HTML實(shí)現(xiàn)注冊(cè)頁面
相關(guān)文章
利用ajaxfileupload插件實(shí)現(xiàn)文件上傳無刷新的具體方法
利用ajaxfileupload插件實(shí)現(xiàn)文件上傳無刷新的具體方法,需要的朋友可以參考一下2013-06-06利用百度地圖JSAPI生成h7n9禽流感分布圖實(shí)現(xiàn)代碼
本文將詳細(xì)介紹下如何使用百度地圖JSAPI生成的H7N9感染分布圖,有對(duì)百度api感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04js以分隔符分隔數(shù)組中的元素并轉(zhuǎn)換為字符串的方法
下面小編就為大家?guī)硪黄猨s以分隔符分隔數(shù)組中的元素并轉(zhuǎn)換為字符串的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11JavaScript基于inquirer封裝一個(gè)控制臺(tái)文件選擇器
這篇文章主要介紹了JavaScript基于inquirer封裝一個(gè)控制臺(tái)文件選擇器,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-08-08通過BootStrap-select插件 js jQuery控制select屬性變化
bootstrap-select我想大家都不陌生是一個(gè)前端下拉框的插件非常好用,在select的標(biāo)簽中設(shè)置屬性可以做很多功能控制,下面通過本文給大家詳細(xì)介紹下2017-01-01JavaScript延遲加載之a(chǎn)sync與defer的應(yīng)用
這篇文章主要介紹了JavaScript延遲加載之a(chǎn)sync與defer的應(yīng)用場景與使用區(qū)別的介紹,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09使用webpack搭建vue項(xiàng)目實(shí)現(xiàn)腳手架功能
這篇文章主要介紹了使用webpack搭建vue項(xiàng)目實(shí)現(xiàn)腳手架功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03