2012-03-28 26 views
0

需要一些幫助。這看起來像是一段簡單的代碼,但我很難理解爲什麼事情沒有正常工作。 onClick事件showdiv(n)工作得很好。但onClick事件hidediv()不會。奇怪的是,如果我在Firebug控制檯上鍵入「hidediv(1)」,那麼javascript語句就可以正常工作。但是當事件附加到div被點擊時,js代碼不會被執行。下面的代碼:HTML onClick事件不會觸發

<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>&nbsp;&nbsp;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> 

一切似乎呈現OK,但不會觸發事件和我在一個總損失,爲什麼。

這裏的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; 
} 
+0

把這個變成爵士小提琴? – Michael 2012-03-28 22:46:18

+0

@邁克爾:沒有小提琴就很危險。以[this](http://jsfiddle.net/LSLWw/)。 – Zeta 2012-03-28 22:52:33

+0

當我在小提琴中看着它時,沒有什麼會跳出來。我可能不得不睡在這一個,明天嘗試。啊! – WyoBuckeye 2012-03-28 23:12:03

回答

2

我認爲這是因爲z-index的是把背景眼前的一切,所以沒有什麼背後可以得到一個點擊