用层模拟一个下拉菜单

2005-6-18 admin 分享
请把以下代码保存为网页!



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style type="text/css">
<!--
.n1 {
border-right: 1px none #999999;
border-top: 1px solid #999999;
border-bottom: 1px solid #DBDBDB;
border-left: 1px solid #999999;
cursor: default;
width:80px
}
.n2 {
background: url) no-repeat center center;
border-top: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #DBDBDB;
border-left: 1px none;
width: 18px;
cursor: default;
}
.ss {
color: #FFFFFF;
background: #0A246A;
}
-->
</style>
<script lanuage="JScript">
function turnit(ss)
{

if (ss.style.display=="none")
{ss.style.display="";
}

else
{ss.style.display="none";
}
}
function sele(tid)
{
bb.style.display=“none“;
text1.value=tid.innerText;
}
function over(tid)
{
for (var i=1;i<4;i++)
{
eval(“t“+i).className=““
}
tid.className=“ss“
}
function out(tid)
{
if (bb.style.display!=“none“)
tid.className=““
}
</script>
<style type="text/css">
<!--
table {
font-size: 9pt;
}
-->
</style>
</head>

<body>
<table width="98" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="98" nowrap>
<input name="text1" type="text" size="10" class=n1 readonly value=请选择 onclick=turnit(bb)><input name="Submit" type="text" class="n2" value="" readonly onclick=turnit(bb)>

</td>
</tr>
<tr>
<td id=bb style=display:none><div id="Layer1" class="n1" >
<table width="100%" border="0" cellpadding="0" cellspacing="0" id=tb>
<tr>
<td id=t1 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this)>选择1</td>
</tr>
<tr>
<td id=t2 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this)>选择2</td>
</tr>
<tr>
<td id=t3 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this)>选择3</td>
</tr>

</table>
</div></td>
</tr>
</table>
</body>
</html>



继续阅读