javascript控制層顯示或隱藏的方法
更新時間：2015年07月22日 17:22:43 作者：中國風(fēng)2012
這篇文章主要介紹了javascript控制層顯示或隱藏的方法,涉及javascript操作頁面元素樣式的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下
本文實例講述了javascript控制層顯示或隱藏的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
<html>
<head>
<title>中國風(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>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細介紹了js實現(xiàn)上傳圖片及時預(yù)覽的相關(guān)資料，具有一定的參考價值，感興趣的朋友可以參考一下2016-05-05
JavaScript的設(shè)計模式經(jīng)典之建造者模式
建造者模式是設(shè)計模式的一種，將一個復(fù)雜對象的構(gòu)建與它的表示分離，使得同樣的構(gòu)建過程可以創(chuàng)建不同的表示。接下來通過本文給大家介紹JavaScript的設(shè)計模式經(jīng)典之建造者模式，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
這篇文章主要介紹了JavaScript顯示當前文檔最后修改日期的方法,實例分析了javascript中document.lastModified的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
解決Babylon.js中AudioContext was not allowed&nbs
這篇文章主要介紹了解決Babylon.js中AudioContext was not allowed to start異常問題方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要為大家詳細介紹了js友好的時間返回函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
LayUi中接口傳數(shù)據(jù)成功,表格不顯示數(shù)據(jù)的解決方法
今天小編就為大家分享一篇LayUi中接口傳數(shù)據(jù)成功,表格不顯示數(shù)據(jù)的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了通過Kettle自定義jar包供javascript使用,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-01-01
下面小編就為大家分享一篇js判斷傳入時間和當前時間大小實例(超簡單)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
參加某公司的面試后，有一機試題目：用web技術(shù)開發(fā)一個B/S結(jié)構(gòu)的公式解析器。于是想了想思路，神來一筆想先寫個計算器程序做基礎(chǔ)，于是便寫了這個程序。2009-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)新年倒計時效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11