62,271
社区成员
发帖
与我相关
我的任务
分享if (obj.style.display == "none")
showMenu(obj);
else
hideMenu(obj);
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<style type="text/css">
.menubar
{
border-right: 1px outset;
border-top: 1px outset;
background: #0099cc;
border-left: 1px outset;
width: 100px;
cursor: default;
color: yellow;
border-bottom: 1px outset;
position: absolute;
top: 10px;
height: 20px;
}
.menu
{
border-right: red 2px solid;
border-top: red 2px solid;
border-bottom: red 2px solid;
border-left: red 2px solid;
display: none;
background: yellow;
padding-bottom: 15px;
padding-top: 15px;
}
.menu A
{
color: blue;
text-decoration: none;
}
.menu A:hover
{
color: #ffffff;
}
</style>
<script language="javascript">
function menuControl(show) {
window.event.cancelBubble = true;
var objID = event.srcElement.id;
var index = objID.indexOf("_");
var mainID = objID.substring(0, index);
var numID = objID.substring(index + 1, objID.length);
if (mainID == "menubar") {
var obj = eval("menu_" + numID);
if (obj.style.display == "none")
showMenu(obj);
else
hideMenu(obj);
}
}
var nbottom = 0, speed = 7;
function displayMenu(obj) {
obj.style.clip = "rect(0 100% " + nbottom + "% 0)";
nbottom += speed;
if (nbottom <= 100) {
timerID = setTimeout("displayMenu(" + obj.id + "),70");
}
else clearTimeout(timerID);
}
function showMenu(obj) {
obj.style.display = "block";
obj.style.clip = "rect(0 0 0 0)";
nbottom = 5;
displayMenu(obj);
}
function hideMenu(obj) {
nbottom = 0;
obj.style.display = "none";
}
function keepMenu(obj) {
obj.style.display = "block";
}
</script>
</head>
<body>
<%--BORDER-RIGHT:red 2px solid; PADDING-RIGHT:15px; BORDER-TOP:red 2px solid; DISPLAY: none; PADDING-LEFT:15px; BACKGROUND: yellow; PADDING-BOTTOM:15px; BORDER-LEFT:red 2px solid; WIDTH: 140px; PADDING-TOP: 15px; BORDER-BOTTOM:red 2px solid; TOP: 30px--%>
<form id="form1" runat="server">
<div>
<table style="font-size: 15px" cellspacing="0" cellpadding="0" width="400" border="0">
<tbody>
<tr>
<td width="20%">
<div class="menubar" id="menubar_1" onclick="menuControl(1)" align="center" style="background-image: url('bg_btn.JPG')">
教育网站
</div>
</td>
<td width="20%">
<div class="menubar" id="menubar_2" onclick="menuControl(1)" align="center">
电脑网站
</div>
</td>
<td width="20%">
<div class="menubar" id="menubar_3" onclick="menuControl(1)" align="center">
免费邮件
</div>
</td>
<td width="20%">
<div class="menubar" id="menubar_4" onclick="menuControl(1)" align="center">
其它网站
</div>
</td>
</tr>
<tr>
<td width="20%">
<div class="menu" id="menu_1" onclick="keepMenu(this)" align="left" style="display:none;">
<div style="float: left; margin-left: -55px; height: 50px;">
<ul style="list-style-type: none; line-height: 180%; float: left">
<li style="width: 107px;" onmouseover="this.style.backgroundColor='#0080C0'" onmouseout="this.style.backgroundColor=''">
<font style="float: left; margin-left: 20px; font-size: 12px;">最新</font></li>
<li style="width: 107px;" onmouseover="this.style.backgroundColor='#0080C0'" onmouseout="this.style.backgroundColor=''">
<font style="float: left; margin-left: 20px; font-size: 12px;">Target map</font></li>
<li style="width: 107px;" onmouseover="this.style.backgroundColor='#0080C0'" onmouseout="this.style.backgroundColor=''">
<font style="float: left; margin-left: 20px; font-size: 12px;">筛选</font></li>
<li style="width: 107px;" onmouseover="this.style.backgroundColor='#0080C0'" onmouseout="this.style.backgroundColor=''">
<font style="float: left; margin-left: 20px; font-size: 12px;">推荐</font></li>
<li style="width: 107px;" onmouseover="this.style.backgroundColor='#0080C0'" onmouseout="this.style.backgroundColor=''">
<font style="float: left; margin-left: 20px; font-size: 12px;">面试</font></li>
<li style="width: 107px;" onmouseover="this.style.backgroundColor='#0080C0'" onmouseout="this.style.backgroundColor=''">
<font style="float: left; margin-left: 20px; font-size: 12px;">offer</font></li>
<li style="width: 107px;" onmouseover="this.style.backgroundColor='#0080C0'" onmouseout="this.style.backgroundColor=''">
<font style="float: left; margin-left: 20px; font-size: 12px;">录用</font></li>
</ul>
</div>
</div>
</td>
<td width="20%">
<div class="menu" id="menu_2" onclick="keepMenu(this)" align="left" style="display:none;">
<a href="http://www.yesky.com/">天极网</a><br>
<a href="http://www.cfan.cn.net/">电脑爱好者</a><br>
<a href="http://www.intoweb.com.cn/">上网杂志</a>
</div>
</td>
<td width="20%">
<div class="menu" id="menu_3" onclick="keepMenu(this)" align="left" style="display:none;">
<a href="http://www.163.com/">163电子邮件</a><br>
<a href="http://freemail.263.net/">首都在线</a><br>
<a href="http://www.21cn.com/">21CN电子邮件</a><br>
<a href="http://www.chinese.com/">炎皇在线</a>
</div>
</td>
<td width="20%">
<div class="menu" id="menu_4" onclick="keepMenu(this)" align="left" style="display:none;">
<a href="http://www.sohu.com.cn/">搜狐</a><br>
<a href="http://www.yahoo.com/">雅虎</a><br>
<a href="http://www.cseek.com/">搜索客</a><br>
<a href="http://www.sina.com/">新浪网</a><br>
<a href="http://202.102.4.31/51windows/js/httP;//www.cqcas.edu.cn/user /sailing">远航网站</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>