HTML / JavaScript頁面跳轉到div
[英]Html/javascript page jumping to div
問題描述
我有一個簡單的導航菜單頁面，單擊某個部分時可以切換頁面。 當我單擊某個部分時，內容出現了一些功能問題。 當指針變成手形時，該部分中的所有內容都是可單擊的，單擊時會跳至第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>
2 個解決方案
解決方案1
1 2015-04-10 03:45:47
所有<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>
解決方案2
1 2015-04-10 03:48:57
每個菜單項都沒有結束</a> 。
<li><a href="#" onclick="return toggle('pg0')">1.1 Variable</li>
添加結尾</a>可以解決您的問題。
如何防止javascript div彈出窗口跳回到頁面頂部？
[英]how to prevent javascript div popup from jumping back to the top of the page?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.