网页制作中几种显示和隐藏层的方法
这里介绍三种网页制作中常用的显示和隐藏层的方法:
1.css样式实现层的显示和隐藏.代码如下:
<a style="color:blue" onMouseOver="document.all.Layer1.style.visibility=''" onMouseOut="document.all.Layer1.style.visibility='hidden'" href="####"> 1234567890</a> <div id="Layer1" style="position:absolute; width:300px; height:100px; z-index:1; background-color: #CCFFFF; layer-background-color: #CCFFFF; border: 1px none #000000; visibility: hidden">11111111</div>
以上代码加入页面中，鼠标悬浮于链接“1234567890”上时，层内容“11111111”显示，鼠标离开时层恢复隐藏状态。
2.Javascript实现层的显示与隐藏.代码如下:
<script>
function folder(d)
{
try{
var temp;
var i = document.all("e_" + d.id);
if (d.style.display == 'none') {
d.style.display = '';
}else{
d.style.display = 'none';
}
} catch(e) {
}
}
</script>
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#" onClick="folder(c_1)">下拉1</a></td>
</tr>
</table>
<div id="c_1"><table class="content" cellpadding="2"><tr><td><table><tr><td class="h4">计算机:</td><td class="info">PC</td></tr><tr><td class="h4">已收集:</td><td class="info">2008年6月11日</td></tr><tr><td class="h4">持续时间:</td><td class="info">76秒</td></tr></table></td></tr></table></div>
<a href="javascript:;" onClick="folder(c_2)">下拉2</a>
<div id="c_2" style="display:none"><table class="content" cellpadding="2"><tr><td><table><tr><td class="h4">计算机:</td><td class="info">PC</td></tr><tr><td class="h4">已收集:</td><td class="info">2008年6月11日</td></tr><tr><td class="h4">持续时间:</td><td class="info">76秒</td></tr></table></td></tr></table></div>
可以看出,后一种方式的代码量较前一种的长,但是后一种能够实现更多的功能
