64、多层的显示与关闭

64、多层的显示与关闭

脚本说明:

把如下代码加入<body>区域中

<script>

<!-- Begin

// quick browser tests

var ns4 = (document.layers) ? true : false;

var ie4 = (document.all && !document.getElementById) ? true : false;

var ie5 = (document.all && document.getElementById) ? true : false;

var ns6 = (!document.all && document.getElementById) ? true : false;

 

function show(sw,obj) {

       // show/hide the divisions

       if (sw && (ie4 || ie5) ) document.all[obj].style.visibility = 'visible';

       if (!sw && (ie4 || ie5) ) document.all[obj].style.visibility = 'hidden';

       if (sw && ns4) document.layers[obj].visibility = 'visible';

       if (!sw && ns4) document.layers[obj].visibility = 'hidden';

}

// End -->

</script>

 

<style type="text/css">

<!--

.myLayersClass { position: relative; visibility: hidden; }

//-->

</style>

<div id = "div1" class = "myLayersClass">

<h3 align="center">这是第一层的内容</h3>

</div>

 

<div id = "div2" class = "myLayersClass" align="center">

<table width="60%" border="1" cellpadding="5" align="center" bgcolor="Aqua">

<tr><th colspan="2">下面是一个表格</th></tr>

       <td><a href="http://www.sina.com">新浪网</a></td>

      

</tr>

<tr>

       <td><a href="http://www.163.com">网易</a></td>

      

</tr>

<tr>

       <td><a href="http://www.7stk.com">网页特效代码</a></td>

 

</tr>

</table>

</div>

<div id = "div3" class = "myLayersClass" align="center">

<br>下面是一张图片<br>

<img src="rushmore.jpg" height=189 border=0 alt="" width=287>

</div>

<div id="div4" align="center">

<form action="" method="post" name="myForm">

<input type=button value="打开第一层" onClick="show(true,'div1');"> <input type=button value="关闭第一层" onClick="show(false,'div1');"><br><br>

<input type=button value="打开第二层" onClick="show(true,'div2');"> <input type=button value="关闭第二层" onClick="show(false,'div2');"><br><br>

<input type=button value="打开第三层" onClick="show(true,'div3');"> <input type=button value="关闭第三层" onClick="show(false,'div3');"><br><br>

<input type=button value="打印此页" onClick="print()"> <input type=button value="隐藏按钮并打印此页" onClick="show(false,'div4');print();show(true,'div4')"> <input type=button value="显示所有的层" onClick="show(true,'div1'); show(true,'div2'); show(true,'div3')">

</form>

</div>

 

Write a comment

Comments: 0