javascript實(shí)現(xiàn)信息的顯示和隱藏如注冊(cè)頁(yè)面
更新時(shí)間：2013年12月03日 17:15:46 作者：
信息的顯示和隱藏在某些時(shí)候還是比較使用的，就比如注冊(cè)信息，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以了解下
我們?cè)趯懽?cè)頁(yè)面的時(shí)候，必填信息是可見(jiàn)的，可選信息是隱藏的，如果用戶希望填寫，可以單擊“詳細(xì)信息”。
<!-- 下面代碼通過(guò)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ù)制代碼 代碼如下:
<!-- 下面代碼通過(guò)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)頁(yè)面
- jsp+dao+bean+servlet(MVC模式)實(shí)現(xiàn)簡(jiǎn)單用戶登錄和注冊(cè)頁(yè)面
- 使用JSP實(shí)現(xiàn)簡(jiǎn)單的用戶登錄注冊(cè)頁(yè)面示例代碼解析
- JS實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)的注冊(cè)頁(yè)面
- JS一個(gè)簡(jiǎn)單的注冊(cè)頁(yè)面實(shí)例
- JavaScript 完成注冊(cè)頁(yè)面表單校驗(yàn)的實(shí)例
- node.js實(shí)現(xiàn)登錄注冊(cè)頁(yè)面
- 原生js驗(yàn)證簡(jiǎn)潔注冊(cè)登錄頁(yè)面
- js正則表達(dá)式注冊(cè)頁(yè)面表單驗(yàn)證
- js當(dāng)前頁(yè)面登錄注冊(cè)框,固定div,底層陰影的實(shí)例代碼
- JS當(dāng)前頁(yè)面登錄注冊(cè)框,固定DIV,底層陰影的實(shí)例代碼
- php用戶注冊(cè)頁(yè)面利用js進(jìn)行表單驗(yàn)證具體實(shí)例
- JS、CSS和HTML實(shí)現(xiàn)注冊(cè)頁(yè)面
相關(guān)文章
HTML+JavaScript實(shí)現(xiàn)掃雷小游戲
這篇文章主要為大家詳細(xì)介紹了HTML+JavaScript實(shí)現(xiàn)掃雷小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
Javascript(es2016) import和require用法和區(qū)別詳解
本篇文章主要介紹了Javascript(es2016) import和require用法和區(qū)別詳解，具有一定的參考價(jià)值，有興趣的可以了解下2017-08-08
一文教你如何實(shí)現(xiàn)localStorage的過(guò)期機(jī)制
要知道localStorage本身并沒(méi)有提供過(guò)期機(jī)制,既然如此那就只能我們自己來(lái)實(shí)現(xiàn)了,這篇文章主要給大家介紹了關(guān)于如何實(shí)現(xiàn)localStorage過(guò)期機(jī)制的相關(guān)資料,需要的朋友可以參考下2022-02-02
Javascript中的every()與some()的區(qū)別和應(yīng)用小結(jié)
every跟some不同點(diǎn)在于，every要判斷數(shù)組中是否每個(gè)元素都滿足條件，只有都滿足條件才返回true，只要有一個(gè)不滿足就返回false，這篇文章主要介紹了Javascript中的every()與some()的區(qū)別和應(yīng)用,需要的朋友可以參考下2023-05-05
Microsfot .NET Framework4.0框架 安裝失敗的解決方法
今天在安裝.NET Framework 4.0，安裝了半天結(jié)果提示未安裝成功,提示原因是服務(wù)未啟動(dòng)了，error code: (0x80070643), "安裝時(shí)發(fā)生嚴(yán)重錯(cuò)誤 "2013-08-08
Set是一種叫做集合的數(shù)據(jù)結(jié)構(gòu)(結(jié)構(gòu)和Array很像),Map是一種叫做字典的數(shù)據(jù)結(jié)構(gòu),這篇文章主要為大家詳細(xì)介紹了JavaScript中Map與Set用法與區(qū)別,需要的小伙伴可以參考下2023-11-11
JS利用cookies設(shè)置每隔24小時(shí)彈出框
這篇文章主要介紹了利用cookies設(shè)置每隔24小時(shí)彈出框的實(shí)例代碼,需要的朋友可以參考下2017-04-04
JavaScript代碼實(shí)現(xiàn)圖片循環(huán)滾動(dòng)效果
這篇文章主要介紹了JavaScript代碼實(shí)現(xiàn)圖片循環(huán)滾動(dòng)效果的相關(guān)資料,非常不錯(cuò)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
常見(jiàn)表單重復(fù)提交問(wèn)題整理及解決方法
常見(jiàn)的重復(fù)提交問(wèn)題如點(diǎn)擊提交按鈕兩次、點(diǎn)擊刷新按鈕等等，下面為大家整理了防止表單重復(fù)提交的方法，感興趣的朋友可以參考下2013-11-11
JavaScript 是一種有趣的語(yǔ)言，我們都喜歡它，因?yàn)樗男再|(zhì)。這篇文章主要介紹了8個(gè)有意思的JavaScript面試題 ,需要的朋友可以參考下2019-07-07