需要一些帮助。这看起来是一段简单的代码，但我很困惑为什么事情不能正常工作。 onClick 事件 showdiv(n) 工作得很好。但 onClick 事件 hidediv() 却没有。奇怪的是，如果我在 Firebug 控制台上输入“hidediv(1)”，javascript 语句就可以正常工作。但是当事件附加的div被点击时，js代码不会被执行。代码如下:
<script type="text/javascript">
function showdiv(n){
switch(n){
case 1:
var div = document.getElementById("menucontent");
div.setAttribute("class","menucontent_v");
break;
case 2:
var div = document.getElementById("biographycontent");
div.setAttribute("class","biographycontent_v");
break;
case 3:
var div = document.getElementById("productscontent");
div.setAttribute("class","productscontent_v");
break;
case 4:
var div = document.getElementById("thankyoucontent");
div.setAttribute("class","thankyoucontent_v");
break;
case 5:
var div = document.getElementById("specialscontent");
div.setAttribute("class","specialscontent_v");
break;
case 6:
var div = document.getElementById("contactcontent");
div.setAttribute("class","contactcontent_v");
break;
case 7:
var div = document.getElementById("gallerycontent");
div.setAttribute("class","gallerycontent_v");
break;}}
function hidediv(n){
switch(n){
case 1:
var div = document.getElementById("menucontent");
div.setAttribute("class","menucontent_h");
break;
case 2:
var div = document.getElementById("biographycontent");
div.setAttribute("class","biographycontent_h");
break;
case 3:
var div = document.getElementById("productscontent");
div.setAttribute("class","productscontent_h");
break;
case 4:
var div = document.getElementById("thankyoucontent");
div.setAttribute("class","thankyoucontent_h");
break;
case 5:
var div = document.getElementById("specialscontent");
div.setAttribute("class","specialscontent_h");
break;
case 6:
var div = document.getElementById("contactcontent");
div.setAttribute("class","contactcontent_h");
break;
case 7:
var div = document.getElementById("gallerycontent");
div.setAttribute("class","gallerycontent_h");
break;}}
</script>
</head>
<body>
<div id="background" class="containerbg">
<img id="background" src="background.jpg" class="bgimg">
</div>
<div id="menuofservices" class="menuofservices" onClick="showdiv(1);"></div>
<div id="menucontent" class="menucontent_h">
<div id="goawaymenu" class="goaway" onClick="hidediv(1);"><img src="closex.jpg" width="30px" height="30px"></div>
<div id="menutitle" class="menutitle"><h2>Menu of Services</h2></div>
<div id="menutext" class="menutext"><p>
<table width="270">
<tr>
<td><strong>Cuts</strong></td>
<td></td>
</tr>
<tr>
<td>Women</td>
<td>$30</td>
</tr>
<tr>
<td>Boys</td>
<td>$15</td>
</tr>
<tr>
<td>Girls (12 & under)</td>
<td>$20</td>
</tr>
<tr>
<td>Bang trim</td>
<td>$7</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Color</strong></td>
<td></td>
</tr>
<tr>
<td>All over</td>
<td>$50</td>
</tr>
<tr>
<td>Retouch</td>
<td>$45</td>
</tr>
<tr>
<td>Full Highlight</td>
<td>$68</td>
</tr>
<tr>
<td> additional color</td>
<td>$5</td>
</tr>
<tr>
<td>Partial Highlight</td>
<td>$52</td>
</tr>
<tr>
<td>Simple Highlight (per foil)</td>
<td>$5</td>
</tr>
<tr>
<td>Men's Color</td>
<td>$24</td>
</tr>
<tr>
<td>Retouch & Highlight</td>
<td>$75</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Wax</strong></td>
<td></td>
</tr>
<tr>
<td>Eyebrow</td>
<td>$12</td>
</tr>
<tr>
<td>Lip</td>
<td>$7</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Makeup</strong></td>
<td></td>
</tr>
<tr>
<td>Application & Lesson</td>
<td>$40</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Misc</strong></td>
<td></td>
</tr>
<tr>
<td>Shampoo & Style</td>
<td>$16</td>
</tr>
<tr>
<td>Shampoo & Flatiron</td>
<td>$21</td>
</tr>
<tr>
<td>Deep Conditioning Treatment</td>
<td>$15</td>
</tr>
<tr>
<td>Updo</td>
<td>$45</td>
</tr>
</table>
</p>
</div>
</div>
一切看起来都正常，但事件没有触发，我完全不知道为什么。
这是 CSS:
@charset "utf-8";
/* CSS Document */
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
height: 768px;
width: 1024px;
}
.containerbg {
position: absolute;
height: 768px;
width: 1024px;
z-index: 0;
}
.bgimg {
height: 768px;
width: 1024px;
}
.goaway {
top: 10px;
right: 10px;
width: 30px;
height: 30px;
z-index: 3;
cursor: pointer;
position: absolute;
}
.menuofservices {
position: absolute;
border: thin solid #000;
height:86px;
width:257px;
left: 600px;
top: 560px;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.menucontent_h {
position: absolute;
border: thin solid #780C19;
height: 600px;
width: 300px;
left: 360px;
top: 100px;
opacity: 0;
z-index: 2;
font-size: 11px;
background-color: #dc7c87;
text-align: left;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
-moz-box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
-webkit-box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
}
.menucontent_v {
position: absolute;
border: thin solid #780C19;
height: 600px;
width: 300px;
left: 360px;
top: 100px;
opacity: 1.0;
z-index: 2;
font-size: 11px;
background-color: #dc7c87;
text-align: left;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
-moz-box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
-webkit-box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
}
.menutitle{
position: absolute;
text-align: center;
width: 300px;
height: 50x;
z-index: 3;
top: 0px;
left: 0px;
}
.menutext{
position: absolute;
left: 0px;
top: 50px;
width: 300px;
height: 500px;
z-index: 3;
background-color: #dc7c87;
text-align: left;
}
最佳答案
我认为这是因为 z-index 将背景放在所有内容的前面，因此后面的任何内容都无法获得点击
关于javascript - HTML onClick 事件不会触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9916752/