javascript控制層顯示或隱藏的方法
本文實(shí)例講述了javascript控制層顯示或隱藏的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<html> <head> <title>中國(guó)風(fēng)</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <script language="JavaScript"> function showLay1(){ lay1.style.visibility="visible"; lay2.style.visibility="hidden"; lay3.style.visibility="hidden"; } function showLay2(){ lay1.style.visibility="visible"; lay2.style.visibility="visible"; lay3.style.visibility="hidden"; } function showLay3(){ lay1.style.visibility="visible"; lay2.style.visibility="visible"; lay3.style.visibility="visible"; } </script> <body> <div id="lay1" style="position:absolute; left:60px; top:30px; width:250px; height:200px; index:1; visibility:visible">這是第一層內(nèi)容,它的背景是透明的</div> <div id="lay2" style="position:absolute; left:60px; top:30px; width:250px; height:200px; index:2; visibility:hidden; background-color:silver">這是第二層內(nèi)容,它的背景是灰色的</div> <div id="lay3" style="position:absolute; left:60px; top:30px; width:250px; height:200px; index:3; visibility:hidden"><br><br><br>這是第三層內(nèi)容,它的背景是透明的</div> <form id="form1" style="position:absolute; left:70px; top:250px;"> <input type="button" value="第一層" onclick="showLay1()"> <input type="button" value="第二層" onclick="showLay2()"> <input type="button" value="第三層" onclick="showLay3()"> </form> </body> </html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- Javascript顯示和隱藏ul列表的方法
- Javascript與jQuery方法的隱藏與顯示
- javascript實(shí)現(xiàn)信息的顯示和隱藏如注冊(cè)頁(yè)面
- javascript實(shí)現(xiàn)div的顯示和隱藏的小例子
- JavaScript欄目列表隱藏/顯示簡(jiǎn)單實(shí)現(xiàn)
- javascript 隱藏/顯示指定的區(qū)域附HTML元素【legend】用法
- javascript 控制 html元素 顯示/隱藏實(shí)現(xiàn)代碼
- javascript 層隱藏和顯示的代碼
- JAVASCRIPT 點(diǎn)擊顯示 隱藏層
- javascript顯示隱藏層比較不錯(cuò)的方法分析
相關(guān)文章
layui的表單驗(yàn)證支持ajax判斷用戶名是否重復(fù)的實(shí)例
今天小編就為大家分享一篇layui的表單驗(yàn)證支持ajax判斷用戶名是否重復(fù)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09javascript實(shí)現(xiàn)的一個(gè)自定義長(zhǎng)度的文本自動(dòng)換行的函數(shù)。
javascript實(shí)現(xiàn)的一個(gè)自定義長(zhǎng)度的文本自動(dòng)換行的函數(shù)。...2007-08-08JavaScript數(shù)組實(shí)現(xiàn)數(shù)據(jù)結(jié)構(gòu)中的隊(duì)列與堆棧
這篇文章主要介紹了JavaScript數(shù)組實(shí)現(xiàn)數(shù)據(jù)結(jié)構(gòu)中的隊(duì)列與堆棧的相關(guān)資料,需要的朋友可以參考下2016-05-05JavaScript靜態(tài)的動(dòng)態(tài)
JavaScript靜態(tài)的動(dòng)態(tài)...2006-09-09javascript實(shí)現(xiàn)倒計(jì)時(shí)提示框
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)倒計(jì)時(shí)提示框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03bootstrap中模態(tài)框、模態(tài)框的屬性實(shí)例詳解
這篇文章主要介紹了bootstrap中模態(tài)框、模態(tài)框的屬性實(shí)例詳解,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02JavaScript實(shí)現(xiàn)替換字符串中最后一個(gè)字符的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)替換字符串中最后一個(gè)字符的方法,涉及javascript字符串的轉(zhuǎn)換與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-03-03JS實(shí)現(xiàn)統(tǒng)計(jì)復(fù)選框選中個(gè)數(shù)并提示確定與取消的方法
這篇文章主要介紹了JS實(shí)現(xiàn)統(tǒng)計(jì)復(fù)選框選中個(gè)數(shù)并提示確定與取消的方法,可實(shí)現(xiàn)javascript針對(duì)頁(yè)面復(fù)選框元素的統(tǒng)計(jì)與提示功能,需要的朋友可以參考下2015-07-07