📄 li7-1.html

📁 JavaScript经典实例教程代码

💻 HTML

字号:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
</head>
<script language="JavaScript">
function showFirstLay()
{
lay1.style.visibility="visible";
lay2.style.visibility="hidden";
lay3.style.visibility="hidden";
}
function showSecondLay()
{
lay1.style.visibility="visible";
lay2.style.visibility="visible";
lay3.style.visibility="hidden";
}
function showThirdLay()
{
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;z-index:1;visibility:visible;">
这是第一层内容，它的背景是透明的。</div>
<div id="lay2" style="position:absolute;left:60px;top:30px;width:250px;height:200px;z-index:2;visibility:hidden;background-color:silver">
这是第二层内容，它的背景色为灰色，它将遮住第一层内容。</div>
<div id="lay3" style="position:absolute;left:60px;top:30px;width:250px;height:200px;z-index:3;visibility:hidden">
<br>
<br>
<br>
<br>
这是第三层内容，它的背景透明，将显示出下面第二层的内容。</div>
<form id="myForm" style="position:absolute;top:250px;left:50px">
<input type="button" value=" 第一层 " onclick="showFirstLay()">
<input type="button" value=" 第二层 " onclick="showSecondLay()">
<input type="button" value=" 第三层 " onclick="showThirdLay()">
</form>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C

搜索代码 Ctrl + F

全屏模式 F11

切换主题 Ctrl + Shift + D

显示快捷键 ?

增大字号 Ctrl + =

减小字号 Ctrl + -