javascript實現(xiàn)信息的顯示和隱藏如注冊頁面
更新時間:2013年12月03日 17:15:46 作者:
信息的顯示和隱藏在某些時候還是比較使用的,就比如注冊信息,下面有個不錯的示例,感興趣的朋友可以了解下
我們在寫注冊頁面的時候,必填信息是可見的,可選信息是隱藏的,如果用戶希望填寫,可以單擊“詳細信息”。
<!-- 下面代碼通過javascript實現(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();">詳細信息</button>
</body>
</html>
復(fù)制代碼 代碼如下:
<!-- 下面代碼通過javascript實現(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();">詳細信息</button>
</body>
</html>
您可能感興趣的文章:
- 用javascript制作qq注冊動態(tài)頁面
- jsp+dao+bean+servlet(MVC模式)實現(xiàn)簡單用戶登錄和注冊頁面
- 使用JSP實現(xiàn)簡單的用戶登錄注冊頁面示例代碼解析
- JS實現(xiàn)驗證碼倒計時的注冊頁面
- JS一個簡單的注冊頁面實例
- JavaScript 完成注冊頁面表單校驗的實例
- node.js實現(xiàn)登錄注冊頁面
- 原生js驗證簡潔注冊登錄頁面
- js正則表達式注冊頁面表單驗證
- js當前頁面登錄注冊框,固定div,底層陰影的實例代碼
- JS當前頁面登錄注冊框,固定DIV,底層陰影的實例代碼
- php用戶注冊頁面利用js進行表單驗證具體實例
- JS、CSS和HTML實現(xiàn)注冊頁面
相關(guān)文章
Javascript(es2016) import和require用法和區(qū)別詳解
本篇文章主要介紹了Javascript(es2016) import和require用法和區(qū)別詳解,具有一定的參考價值,有興趣的可以了解下2017-08-08
一文教你如何實現(xiàn)localStorage的過期機制
要知道localStorage本身并沒有提供過期機制,既然如此那就只能我們自己來實現(xiàn)了,這篇文章主要給大家介紹了關(guān)于如何實現(xiàn)localStorage過期機制的相關(guān)資料,需要的朋友可以參考下2022-02-02
Javascript中的every()與some()的區(qū)別和應(yīng)用小結(jié)
every跟some不同點在于,every要判斷數(shù)組中是否每個元素都滿足條件,只有都滿足條件才返回true,只要有一個不滿足就返回false,這篇文章主要介紹了Javascript中的every()與some()的區(qū)別和應(yīng)用,需要的朋友可以參考下2023-05-05
Microsfot .NET Framework4.0框架 安裝失敗的解決方法
今天在安裝.NET Framework 4.0,安裝了半天結(jié)果提示未安裝成功,提示原因是服務(wù)未啟動了,error code: (0x80070643), "安裝時發(fā)生嚴重錯誤 "2013-08-08
JavaScript代碼實現(xiàn)圖片循環(huán)滾動效果
這篇文章主要介紹了JavaScript代碼實現(xiàn)圖片循環(huán)滾動效果的相關(guān)資料,非常不錯,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2016-06-06

