Html/javascript page jumping to 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. 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. 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. 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>
2 answers
solution1
1 2015-04-10 03:45:47
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.
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>
solution2
1 2015-04-10 03:48:57
You have no closing </a> for each of your menu items.
<li><a href="#" onclick="return toggle('pg0')">1.1 Variable</li>
Add the closing </a> 's to fix your problems.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Jumping to a new HTML page with JavaScript
how to prevent javascript div popup from jumping back to the top of the page?
Prevent JavaScript page jumping
Html menu jumping to div on click
Webkit Javascript Causes Page Jumping
Stop javascript onclick 'page jumping'
Jumping div in Safari and Chrome. jQuery/Javascript
HTML from one page to div with javascript
Collapsing JavaScript/HTML div on page load?
Render whole page HTML in a div using Javascript
Related Tags