快捷導(dǎo)航

javascript控制層顯示或隱藏的方法

更新時(shí)間：2015年07月22日 17:22:43 作者：中國(guó)風(fēng)2012

這篇文章主要介紹了javascript控制層顯示或隱藏的方法,涉及javascript操作頁(yè)面元素樣式的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下

本文實(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ì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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