HTML / JavaScript页面跳转到div

Question

I have a simple nav menu page that toggles pages when clicked on a section. 我有一个简单的导航菜单页面，单击某个部分时可以切换页面。 When I do click on a section I get some functionality problems with the content. 当我单击某个部分时，内容出现了一些功能问题。 All the content in section is clickable as the pointer turns into a hand and when clicked it jumps to section 2.3 events. 当指针变成手形时，该部分中的所有内容都是可单击的，单击时会跳至第2.3节中的事件。 Also when clicking the try me button and performing the alert messages the page again jumps the end of the divs to 2.3 events. 同样，当单击“尝试我”按钮并执行警报消息时，页面再次将div的末尾跳至2.3事件。 How do I get my page to stay on the section which I select after completing the example. 完成示例后，如何使我的页面停留在选择的部分。 Also how do I remove that problem of the page jumping to 2.3 when clicking anywhere on a section. 另外，当我单击某个部分的任意位置时，如何解决跳至2.3的页面的问题。 Thanks 谢谢

 <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>

Answer 1

all of the <a> tags should have closing tag, you missed the </a> tag, add it back to your HTML, your code will work well. 所有<a>标记都应带有结束标记，您错过了</a>标记，然后将其重新添加到HTML中，您的代码将运行良好。

example: 例：

<li><a href="#" onclick="return toggle('pg0')">1.1 Variable</li>

should be 应该

<li><a href="#" onclick="return toggle('pg0')">1.1 Variable</a></li>

Answer 2

You have no closing </a> for each of your menu items. 每个菜单项都没有结束</a> 。

<li><a href="#" onclick="return toggle('pg0')">1.1 Variable</li>

Add the closing </a> 's to fix your problems. 添加结尾</a>可以解决您的问题。

HTML / JavaScript页面跳转到div

问题描述

2 个解决方案

解决方案1
1 2015-04-10 03:45:47

解决方案2
1 2015-04-10 03:48:57

HTML / JavaScript页面跳转到div

问题描述

2 个解决方案

解决方案1 1 2015-04-10 03:45:47

解决方案2 1 2015-04-10 03:48:57

解决方案1
1 2015-04-10 03:45:47

解决方案2
1 2015-04-10 03:48:57