0
Нужна помощь. Это похоже на простую часть кода, но я в тупике о том, почему что-то не работает должным образом. События onClick showdiv (n) работают отлично. Но событие onClick hidediv() не делает. Странно то, что если я нахожу «hidediv (1)» в консоли Firebug, инструкция javascript работает отлично. Но js-код не выполняется, когда нажата клавиша div, к которой привязано событие. Вот код: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> 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;
}
поместить это в Js скрипку? – Michael
@ Майкл: Опасно идти без скрипки. Возьмите [это] (http://jsfiddle.net/LSLWw/). – Zeta
Ничто не выпрыгивает на меня, глядя на него в скрипке. Я мог бы просто заснуть на этом и попробовать завтра. Тьфу! – WyoBuckeye