The example in this article describes how to display or hide the JavaScript control layer. Share it with everyone for your reference. The specific implementation method is as follows:
<html> <head> <title>中国风</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">这是第一层内容,它的背景是透明的</div> <div id="lay2" style="position:absolute; left:60px; top:30px; width:250px; height:200px; index:2; visibility:hidden; background-color:silver">这是第二层内容,它的背景是灰色的</div> <div id="lay3" style="position:absolute; left:60px; top:30px; width:250px; height:200px; index:3; visibility:hidden"><br><br><br>这是第三层内容,它的背景是透明的</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>
I hope this article will be helpful to everyone’s JavaScript programming design.