0

我有这个代码

样式.css

.row {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 22px;
    width: 100%;
    background: black;
    color: white;
    padding: 0px;
}

.content {
    margin-top: 22px;
    padding: 10px;
}

div.navigation span.left {
  float: left;
  text-align: left;
  font-weight: bold;
  width: 49%;
  }

div.navigation span.right {
  float: right;
  text-align: right;
  font-weight: bold;
  width: 49%;
  }

.menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: black;
    color: white;
    padding: 10px;
opacity:0.9;
display: ;
}

导航.htm

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Home</title>
<link rel="StyleSheet" href="style.css" type="text/css">
<script type="text/javascript">
function dispHandle(obj)
{
if (obj.style.display == "none")
obj.style.display = "";
else
obj.style.display = "none";
}

</script>
</head>
<body onload="dispHandle(uni);">
<div class="navigation">
<div id="container" style="width: 100%;">
<div class="row"> <span class="left"><a onmouseover="dispHandle(uni)">Activities</a><img
style="width: 18px; height: 18px;" alt="" src="images/void.png"></span>
<span style="font-weight: bold;" class="right"><img
style="width: 18px; height: 18px;" alt="" src="images/volume.png"><img
style="width: 18px; height: 18px;" alt="" src="images/bluetooth.png"><img
style="width: 18px; height: 18px;" alt="" src="images/wireless.png"><img
style="width: 26px; height: 18px; font-style: italic;" alt=""
src="images/battery.png"><iframe
src="http://free.timeanddate.com/clock/i2vrnsgh/fcfff/tct/pct/ftb"
allowtransparency="true" frameborder="0" height="18" width="86"></iframe><img
style="width: 18px; height: 18px;" alt="" src="images/user.png">Demi
Lovato&nbsp;</span>
</div>
</div>
</div>
<div id="uni">
<div style="text-align: center;" class="menu"> <br>
<img onclick="dispHandle(uni)"
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
    src="http://demilovato.sourceforge.net/images/close.png"><br>
<br>
<div align="center">
<table style="text-align: left; width: 410px; height: 268px;" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><a
href="index.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/Home.png"></a><br>
Home<br>
</td>
<td style="vertical-align: top; text-align: center;"><a
href="Downloads.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/Downloads.png"></a><br>
Downloads<br>
</td>
<td style="vertical-align: top; text-align: center;"><a
href="Screenshots.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/Screenshots.png"></a><br>
Screenshots<br>
</td>
<td style="vertical-align: top; text-align: center;"><a
href="Links.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/Links.png"></a><br>
Links<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;"><a
href="FAQ.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/FAQ.png"></a><br>
FAQ<br>
</td>
<td style="vertical-align: top; text-align: center;"><a
href="Contact.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/Contact.png"></a><br>
Contact<br>
</td>
<td style="vertical-align: top; text-align: center;"><a
href="About.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/About.png"></a><br>
About<br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
<br>
</div>
</div>
</div>
</body>
</html>

它假设能够将鼠标悬停在活动上，并显示全屏 css 菜单，然后通过单击 XI 关闭，通过 show hide javascipt 功能执行此操作。两个问题是，当我在 firefox 中加载它时它不起作用，但它在我尝试过的所有其他浏览器（Safari、Chrome、Rekonq）中都可以工作另外，我如何默认隐藏它而不是 onload？

4

1 回答 1

1

此处的示例解决方案：http: //jsfiddle.net/msZVY/3/

正如 Firefox 控制台中所说，Firefox 不知道“uni”是什么。该函数dispHandle(uni)显示“使用具有对象 uni 的参数执行 dsipHandle 函数”。uni 没有定义。

我不确定为什么 Safari/Chrome 能够“更智能”并且看到 uni 是元素的 id。（也许其他人可以启发我）但是对于 Firefox，您应该使用以下命令明确说明这一点：

function dispHandle(id)
{
  obj = document.getElementById(id);  //define obj using the id
  if (obj.style.display == "none")
    obj.style.display = "block";
  else
    obj.style.display = "none";
}

在您的内联 javascript 中，您应该将 uni 放在引号中。 onmouseover="dispHandle('uni')"代替onmouseover="dispHandle(uni)"

要回答您关于除 onload 之外的另一种隐藏方法的问题，您可以使用常规 css 来完成：

#uni{display:none}

在您的上述函数中，我还将其从更改为obj.style.display = "";，obj.style.display = "block"; 因为这将在样式表中将其显式更改为 div 的默认块显示，覆盖您的 style.css

于 2011-12-12T06:25:55.900 回答