我有一个简单的导航菜单页面，可以在单击某个部分时切换页面。当我点击一个部分时，我得到了一些内容的功能问题。当指针变成一只手时，部分中的所有内容都是可点击的，当点击它时，它会跳转到2.3节事件。此外，当单击“尝试我”按钮并执行警报消息时，页面再次将div的结尾跳转到2.3事件。如何在完成示例后让我的页面保留在我选择的部分。另外，当单击某个部分的任何位置时，如何删除页面跳转到2.3的问题。感谢
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Final Project</title>
<style type="text/css">
body {
}
.nav {
list-style-type:none;
padding-left:0px;
padding-right:0px;
text-align:center;
}
.nav li {
float:left;
width:450px;
border:solid 1px black;
margin-right:-1px;
}
.nav a {
text-decoration:none;
display:block;
color: black;
}
.submenu {
display:none;
list-style-type:none;
padding-left:0px;
padding-right:0px;
}
.nav a:hover {
background-color:grey;
}
li:hover .submenu {
display:block;
}
.pg {
display:none;
position:absolute;
padding-top:200px;
z-index: -1;
}
.pg h1 {
color: black;
}
.pg p {
word-wrap: normal;
color: black;
width: 58em;
}
</style>
</head>
<body>
<div class="header">
<ul class="nav">
<li><a href="#">Javascript Language Fundamentals</a>
<ul class="submenu">
<li><a href="#" onclick="return toggle('pg0')">1.1 Variable</li>
<li><a href="#" onclick="return toggle('pg1')">1.2 Operators</li>
<li><a href="#" onclick="return toggle('pg2')">1.3 Conditional Statements</li>
<li><a href="#" onclick="return toggle('pg3')">1.4 Loops</li>
<li><a href="#" onclick="return toggle('pg4')">1.5 Functions</li>
<li><a href="#" onclick="return toggle('pg5')">1.6 JS ObjectsGeneral Overview</li>
<li><a href="#" onclick="return toggle('pg6')">1.7 JS Built-in Objects</li>
<li><a href="#" onclick="return toggle('pg7')">1.8 Array Object</li>
<li><a href="#" onclick="return toggle('pg8')">1.9 String Object</li>
</ul>
</li>
<li><a href="#">Javascript - Web Document Interaction</a>
<ul class="submenu">
<li><a href="#" onclick="return toggle('pg9')">2.1 Browser Objects</li>
<li><a href="#" onclick="return toggle('pg10')">2.2 HTML Objects</li>
<li><a href="#" onclick="return toggle('pg11')">2.3 Events</li>
</ul>
</li>
</ul>
</div>
<div id="pg">
<div id="pg0" class="pg">
<h1 class="h1"> 1.1 Variables </h1>
<p> Variables are containers for storing information that come in different data types. The data types that variables can hold are "Undefined, Null, Boolean, Number, String or
Object."</p>
<h1 class="h1"> General Syntax </h1>
<p> Variables are declared with a "var" statement. Variables must start with a letter, underscore (_), or dollar signt ($). After that numbers can be used. Variables are case
sensitve. </p>
<p> Here's an example of an undefined variable:</p>
<p style="text-indent: 5em;"><i> var aneel; </i></p>
<p> Here's an example of a variable with string value:</p>
<p style="text-indent: 5em;"><i> var aneel = "javascript"; </i></p>
<p> Here's an example of a variable with numeric value:</p>
<p style="text-indent: 5em;"><i> var aneel2 = 6; </i></p>
<p> Here's an example of a variable which adds expressions:</p>
<p style="text-indent: 5em;"><i> var aneel3 = (aneel + aneel2); </i></p>
<p> The result would be javascript6 </p>
<h1 class="h1"> Methods </h1>
<p> Per the examples above you assign variables values with the "=" which assigns the variable expression on the right a value on the left. Per the last example above you can add
expression with the "+" operator.
<h1 class="h1"> Properties </h1>
<p>If a variable was created in a function then it may have properties. If it was created as a global variable then it probably doesn't have properties</p>
<h1 class="h1"> Example </h1>
<p style="margin-left: 100px;"><i>
//declaration of variables<br>
var greetingString = "Hello";<br>
//User entry<br>
var myName = prompt("Please enter your name", "");<br>
var myAge = prompt("Please enter your age", "");<br>
var myPhone = prompt("Please enter your phone number", "");<br>
var myEmail = prompt("Please enter your email", "");<br>
var concatString;<br>
//concatenation of strings and variables<br>
concatString = greetingString + " " + myName + "\nWOW, you are " + myAge + " years old!" + "\nI will contact you by phone " + myPhone + " or email: " + myEmail +
"\nThank you!";<br>
//Display concatenation<br>
alert(concatString);<br>
</i>
<br>
<input type=button onClick="example1();" value='Try Me'>
</p>
</div>
<div id="pg1" class="pg">
<h1 class="h1"> 1.2 Operators </h1>
</div>
<div id="pg2" class="pg">
<h1 class="h1"> 1.3 Conditional Statements </h1>
</div>
<div id="pg3" class="pg">
<h1 class="h1"> 1.4 Loops </h1>
</div>
<div id="pg4" class="pg">
<h1 class="h1"> 1.5 Functions </h1>
</div>
<div id="pg5" class="pg">
<h1 class="h1"> 1.6 JS ObjectsGeneral Overview </h1>
</div>
<div id="pg6" class="pg">
<h1 class="h1"> 1.7 JS Built-in Objects </h1>
</div>
<div id="pg7" class="pg">
<h1 class="h1"> 1.8 Array Object </h1>
</div>
<div id="pg8" class="pg">
<h1 class="h1"> 1.9 String Object </h1>
</div>
<div id="pg9" class="pg">
<h1 class="h1"> 2.1 Browser Objects </h1>
</div>
<div id="pg10" class="pg">
<h1 class="h1"> 2.2 HTML Objects </h1>
</div>
<div id="pg11" class="pg"> <h1 class="h1"> 2.3 Events </h1> </div>
<script type="text/javascript">
function toggle(IDS) {
var sel = document.getElementById('pg').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
if (sel[i].id != IDS) { sel[i].style.display = 'none'; }
}
var status = document.getElementById(IDS).style.display;
if (status == 'block') { document.getElementById(IDS).style.display = 'none'; }
else { document.getElementById(IDS).style.display = 'block'; }
return false;
}
function example1() {
var greetingString = "Hello";
var myName = prompt("Please enter your name", "");
var myAge = prompt("Please enter your age", "");
var myPhone = prompt("Please enter your phone number", "");
var myEmail = prompt("Please enter your email", "");
var concatString;
concatString = greetingString + " " + myName + "\nWOW, you are " + myAge + " years old!" + "\nI will contact you by phone " + myPhone + " or email: " + myEmail + "\nThank you!" ;
alert(concatString);
}
</script>
</body>
</html>
答案 0 :(得分：1)
所有<a>代码都应包含结束标记，您错过了</a>代码，将其添加回HTML，您的代码也能正常使用。
示例：
<li><a href="#" onclick="return toggle('pg0')">1.1 Variable</li>
应该是
<li><a href="#" onclick="return toggle('pg0')">1.1 Variable</a></li>
答案 1 :(得分：1)
您的每个菜单项都没有结束</a>。
<li><a href="#" onclick="return toggle('pg0')">1.1 Variable</li>
添加结束</a>以解决您的问题。