这是我第一次尝试使用javascript。我已经在这个网站上工作了几天，今天当我开始研究它时发现我的javascript命令没有像他们那样工作。期望的结果非常简单。当您单击菜单项时按钮更改图像，然后可以查看所需的元素。问题是当我点击菜单项时，所有媒体都被立即加载并且没有任何变化，我不知道是什么导致了这一点。
这里是html
<div class="container">
<div class="about" id="about"><img src="images/about plaque text.jpg" width="500" height="341" alt="about" /></div>
<div class="headimg" id="headimg">
<div align="left">
<img src="images/Logo.png" id="logoButton" alt="M-TEK" width="621" height="127" align="left" />
<table width="350" border="0" cellpadding="0">
<tr></tr>
<tr>
<td><div align="center">
<table width="442" border="0" align="center" cellpadding="10" class="content">
<tr>
<td width="144"><p align="center">Office Hours</p>
<p align="center">Monday-Friday</p>
<p align="center">9:00am-5:00p</p></td>
<td width="203"><div align="center">21339 Garrett Highway<br>
Suite A<br>
Oakland, MD 21550<br>
(301) 387-2960<br>
(855) GET-MTEK</div></td>
</tr>
</table>
</div></td>
</tr>
</table>
</div>
</div>
<div class="security" id="security">
<div class="securityimage" id="securityimage"><img src="images/Security Font.png" width="575" height="156" alt="Security" /></div>
<div class="securitytext" id="securitytext">
<div align="left">
<ul>
<li>Full Buisness or Residential Security And Automation</li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="computer" id="computer">
<div class="computerimage" id="computerimage">
<img src="images/Computer Font.png" width="815" height="154" alt="Computers" />
<div class="computertext" id="computertext">
<div align="left">
<ul>
<li>Complete Residental Computer servicing and repair </li>
</ul>
</div>
</div>
</div>
</div>
<div class="network" id="network">
<div class="networkimage" id="networkimage">
<img src="images/Networking Font.png" width="815" height="154" alt="Network Services" />
<div class="networktext" id="networktext">
<div align="left">
<ul>
<li>Commercial and residential networking services</li>
<li>Wi-Fi System installations and services</li>
<li>Voip commuication installation</li>
<li>Audio/Video cabling</li>
<li>Internet setup in coordination with ISP</li>
</ul>
</div>
</div>
</div>
</div>
<div class="commercial" id="commercial">
<div class="commercialimage" id="commercialimage">
<img src="images/Commercial Font.png" width="815" height="154" alt="Commercial Services" />
<div class="commercialtext" id="commercialtext">
<div align="left">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
<div class="web" id="website">
<div class="webimage" id="webimage">
<img src="images/Web Font.png" width="906" height="154" alt="Website Design" />
<div id="webtext">
<div align="left">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
<div class="menu" id="menu">
<div align="center">
<table border="0" cellpadding="0">
<tr>
<td width="350"><img src="images/securitynomouse.png" id="securityButton" width="350" height="43" alt="security" />
</td>
<td width="350"><img src="images/computernomouse.png" id="computerButton"width="350" height="43" alt="Computers Services" /></td>
<td width="351"><img src="images/networknomouse.png" id="networkButton" width="350" height="43" alt="Network Management" /></td>
<td width="351"><img src="images/commercialnomouse.png" id="commercialButton" width="350" height="43" alt="Commercial IT" /></td>
<td width="651"><img src="images/webnomouse.png" id="webButton" width="350" height="43" alt="Website Development" /></td>
</tr>
</table>
</div>
</div>
<div class="securityVideo" id="securityVideo">
<video id="videojavascript"> <source src="videos/Interactive.mp4" type="video/mp4" /></video>
</div>
</div>
以下是脚本
<script>
function resetMenu(){
document.getElementById("securityButton").src="images/securitynomouse.png";
document.getElementById("computerButton").src="images/computernomouse.png";
document.getElementById("networkButton").src="images/networknomouse.png";
document.getElementById("commercialButton").src="images/commercialnomouse.png";
document.getElementById("webButton").src="images/webnomouse.png";
};
function hideElements(){
$("#about").hide();
$("#securitytext").hide();
$("#securityimage").hide();
$("#securityVideo").hide();
$("#videojavascript").pause();
$("#computertext").hide();
$("#computerimage").hide();
$("#networktext").hide();
$("#networkimage").hide();
$("#commercialtext").hide();
$("#commercialimage").hide();
$("#webtext").hide();
$("#webimage").hide();
};
$(document).ready(function(){
//hide all, initially, inavtive elements.
hideElements();
//hide then fade in header and about
$("#headimg").hide().fadeIn(700);
$("#about").hide().fadeIn(1500);
$("#logoButton").click(function(){
resetMenu();
hideElements();
$("#about").hide().fadeIn(1000);
});
$("#securityButton").click(function(){
resetMenu();
hideElements();
document.getElementById("securityButton").src="images/securitymouse.png";
$("#securityimage").show("drop",500,"right");
$("#securitytext").show("drop",1000,"right");
$("#securityVideo").fadeIn(1000);
});
$("#computerButton").click(function(){
hideElements();
resetMenu();
document.getElementById("computerButton").src="images/computermouse.png";
$("#computerimage").show("drop",500,"right");
$("#computertext").show("drop",1000,"right");
});
$("#networkButton").click(function(){
hideElements();
resetMenu();
document.getElementById("networkButton").src="images/networkmouse.png";
$("#networkimage").show("drop",500,"right");
$("#networktext").show("drop",1000,"right");
});
$("#commercialButton").click(function(){
hideElements();
resetMenu();
document.getElementById("commercialButton").src="images/commercialmouse.png";
$("#commercialimage").show("drop",500,"right");
$("#commercialtext").show("drop",1000,"right");
});
$("#webButton").click(function(){
hideElements();
resetMenu();
document.getElementById("webButton").src="images/webmouse.png";
$("#webimage").show("drop",500,"right");
$("#webtext").show("drop",1000,"right");
});
});
</script>