>我在网站上有一个页面"关于托福"。 如果我点击关于托福,则内容/表格将更改为关于托福的内容/表格。 当我单击"关于托福"时,内容正在更改,但是当我单击"关闭"时,表单/内容没有更改。 请帮忙
这是我的页面代码
<!-- Start Page 2 About -->
<div id="page2" class="content">
<div class="container_12">
<div class="grid_12">
<div class="slogan">
<h3>Help your <span>TOEFL</span> Score<em> High</em></h3>
</div>
</div>
<!-- Start menu-form -->
<form id="menu-form">
<div class="grid_2">
<div class="box 60px"> <img src="images/img1.png" alt="">
<div class="text1"><a href="#page2" onclick="showAboutTOEFL()">About TOEFL</a></div>
</div>
</div>
<div class="grid_2">
<div class="box 60px"> <img src="images/img2.png" alt="">
<div class="text1"><a href="#">Tips and Trick</a></div>
</div>
</div>
<div class="grid_2">
<div class="box 60px"> <img src="images/img8.png" alt="">
<div class="text1"><a href="#page2" onclick="showAboutTOEFL()">Cambridge</a></div>
</div><br><br><br><br><br><br><br><br>
</div>
</form>
<!-- End menu-form -->
<!-- Start AboutTOEFL-form -->
<form id="AboutTOEFL-form" style="display:none" class="grid_14">
<div id="filters" class="sixteen columns">
<ul class="clearfix">
<li><a href="#page2" onclick="showAboutTOEFL()">
<h5>About TOEFL</h5>
</a></li>
<li><a href="#" >
<h5>Tips And Trick</h5>
</a></li>
<li><a href="#page2" onclick="showMenuForm()">
<h5>Close</h5>
</a></li>
</ul>
</div>
<div class="box 1000px">
<img src="images/toefl-1.jpg" alt=""><br><br>
--my text--
</div>
</form>
<!-- End AboutTOEFL-form -->
</div>
</div>
<!-- End Page 2 -->
这是我的 Java 脚本
<script type="text/javascript">
var showAboutTOEFL = function() {
document.getElementById("menu-form").setAttribute("style", "display:none");
document.getElementById("AboutTOEFL-form").setAttribute("style", "display:block");
}
</script>
<script type="text/javascript">
var showMenuform = function() {
document.getElementById("menu-form").setAttribute("style", "display:block");
document.getElementById("AboutTOEFL-form").setAttribute("style", "display:none");
}
</script>
onclick
事件的大小写错误。你有onclick="showMenuForm()"
,但你的函数名称是showMenuform
(小写"f")。