我有一个简单的导航菜单页面，可在单击时切换页面。我从菜单中选择内容似乎保留了一些悬停属性时出现问题。将鼠标悬停在内容上并点击它或页面上的任何位置时，它会跳转到＆＃39; pg11＆＃39; 2.3事件div。此外，当通过单击“尝试我”按钮在底部页面上执行示例，然后完成警报消息时，它再次跳转到“＆＃39; pg11＆＃39; 2.3事件div。解决这个问题的任何方法？我只将内容包含在1.1变量中，因此请单击该项以查看我的问题。感谢
<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 id="pg3" class="pg">
<h1 class="h1"> 1.4 Loops </h1>
<div id="pg4" class="pg">
<h1 class="h1"> 1.5 Functions </h1>
<div id="pg5" class="pg">
<h1 class="h1"> 1.6 JS ObjectsGeneral Overview </h1>
<p> Javascript objects contain properties, methods and constructors. Properties are values associated with an object. Methods are actions that can be performed by object.
Constructors are used to create objects. In Javascript the 3 types of objects that can be used are: 1. native objects (objects supplied by Javascript) 2. Host objects (object supplied by
the browser environment) 3. User-defined objects (objects defined by programmer). In Javascript Objects are copied, passed, compared by REFERENCE.
<h1 class="h1"> General Syntax </h1>
<p> The syntax to create an object are as follows: myObj = new Date(2010); -- creates object myObj as a Date Object. Another way of creating an object is: var myObj = {property1,
property2,....}
<h1 class="h1"> Methods </h1>
<p>Accessing Object methods are as follows: objectName.methodName for example myObj.setYear(2012); myObj.getYear();
<h1 class="h1"> Properties </h1>
<p>Accessing object properties are as follows: objectName.propertyName = value for example myObj.size=3;
<h1 class="h1"> Examples </h1>
<p style="margin-left: 100px;"><i>
var person = {<br>
firstName : "John",<br>
lastName : "Doe",<br>
age : 50,<br>
eyeColor : "blue"<br>
};<br>
alert(person.firstName + " is " + person.age + " years old.");<br>
</i>
<br>
<input type=button onClick="example6();" value='Try Me'>
</p>
</div>
<div id="pg6" class="pg">
<h1 class="h1"> 1.7 JS Built-in Objects </h1>
<p> Built-in objects (Native objects) have pre-defined methods and properties. They can be String objects, Math objects, Array objects, Date objects. </p>
<h1 class="h1"> General Syntax </h1>
<p> Built-in objects follow the general syntax of any javascript object. For date objects your can instantiate a date as follows: 1. var d = new Date(); 2. var d = new Date
(milliseconds); 3. var d = new Date(dateString); 4. var d = new date(year, month, day, hourse, minutes, seconds, milliseconds);</p>
<h1 class="h1"> Methods </h1>
<p> For date objects there are 3 types of methods: 1. extracting information from date object (all 'get' methods) 2. set components of the date object (all 'set' methods) 3. other
date (all 'to' methods). For the Math object methods they can be invoked by the Math.methodName(params)</p>
<h1 class="h1"> Properties </h1>
<p> Date object properties are as follows: constructor - Returns the function that created the Date objects' prototype, prototype - Allows you to add properties and methods to an
object. Math object properties can be invoked by Math.propertyName </p>
<h1 class="h1"> Examples </h1>
<p style="margin-left: 100px;"><i>
//Returns math property pi to variable x<br>
var x = Math.PI;<br>
//Instantiate datetime as a date object<br>
var datetime = new Date();<br>
//Sets the date of the object datetime<br>
datetime.setDate(12);<br>
datetime.setFullYear(2015);<br>
datetime.setMonth(4);<br>
alert("The date is " + datetime);<br>
alert("Max of 5 and 7 is " + Math.max(5,7));<br>
alert("Value of pie is " + x);<br>
</i>
<br>
<input type=button onClick="example7();" value='Try Me'>
</p>
</div>
<div id="pg7" class="pg">
<h1 class="h1"> 1.8 Array Object </h1>
<p> Arrays are a built-in javascript object which collects elements under a single name. Each element is identified by an index. Arrays can be multidimensional which would result
in a arrays of arrays</p>
<h1 class="h1"> General Syntax </h1>
<p> Creating an array is as follows: var aMyArray = new Array(); or var aMyArray = Array();, if you know the numbers of an element: var aMyArray = new Array(element1, element2,
.......); or var aMyArray = Array(element1, element2,........); You can use the literal notation as follows: var aMyArray = [element1, element2,........]. Accessing an element is as
follows: aMyArray[elementnumber] where 0 is the first element</p>
<h1 class="h1"> Methods </h1>
<p> Array object has 5 methods: 1. Conversion Methods (i.e toString()), 2. Stack Methods (i.e pop()) 3. Queue Methods (i.e shift()) 4. Reordering Methods (i.e reverse()) 5.
Manipulation Methods (i.e. Slice(start, stop)</p>
<h1 class="h1"> Properties </h1>
<p> Array objects have the length property which can be called by: aMyArray.length</p>
<h1 class="h1"> Examples </h1>
<p style="margin-left: 100px;"><i>
var myCars = new Array();<br>
myCars[0] = new Array();<br>
myCars[0][0] = "BMW";<br>
myCars[0][1] = 50.500;<br>
myCars[1] = new Array();<br>
myCars[1][0] = "Mercedes";<br>
myCars[1][1] = 58.800;<br>
myCars[2] = new Array();<br>
myCars[2][0] = "Ferrari";
myCars[2][1] = 80.750;<br>
var totalPrice = myCars[0][1] + myCars[1][1] + myCars[2][1];<br>
alert("The price of the " + myCars[0][0] + " car is \$" + myCars[0][1] + "<BR>");<br>
alert("The price of the " + myCars[1][0] + " car is \$" + myCars[1][1] + "<BR>");<br>
alert("The price of the " + myCars[2][0] + " car is \$" + myCars[2][1] + "<BR>");<br>
alert("The total price of all " + myCars.length + " cars is \$" + totalPrice);<br>
</i>
<br>
<input type=button onClick="example8();" value='Try Me'>
</p>
</div>
<div id="pg8" class="pg">
<h1 class="h1"> 1.9 String Object </h1>
<p> String object is used to manipulate a stored piece of text</p>
<h1 class="h1"> General Syntax </h1>
<p> String objects are created with new String(). For example var txt = new String("string"); creates a new string object 'txt' with value "string". Simplifying this syntax would
yield var txt = "string";</p>
<h1 class="h1"> Methods </h1>
<p> There is various methods such as indexOf(), charAt(), concat() etc etc which returns, splits or extracts various parts of the string. There exist a String HTML wrapper method
which returns the string wrapped inside the appropriate HTML tag. (i.e. big (), bold(), fixed(), etc etc)</p>
<h1 class="h1"> Properties </h1>
<p> String properties are constructors which returns the function that created the String object's prototype. Length property which returns the length of a string. Prototype which
allows you to add properties and methods to an object </p>
<h1 class="h1"> Examples </h1>
<p style="margin-left: 100px;"><i>
var txt = "Aneel";<br>
var txt2 = "Nauth";<br>
alert("Length of string is " + txt.length);<br>
alert("Upper case string " + txt.toUpperCase());<br>
alert("Lower case string " + txt.toLowerCase());<br>
alert("First occurence of n occurs at " + txt.indexOf('n'));<br>
</i>
<br>
<input type=button onClick="example9();" value='Try Me'>
</p>
</div>
<div id="pg9" class="pg">
<h1 class="h1"> 2.1 Browser Objects </h1>
<p> Browser object model (Document Object Model level 0) proved objects that expose the browser functionality to javascript. Primary BOM objects are window objects. With every
instance of a BODY or FRAMESET tag in every browser window or frame a Window object is created. </p>
<h1 class="h1"> General Syntax </h1>
<p> Window objects are created just like any other built-in objects. (i.e var myVar = objectname.property)</p>
<h1 class="h1"> Methods </h1>
<p> There are numerous window object method such as close() - which closes a window, open() - which opens a new browser window, stop() - which stops the window from loading etc
etc</p>
<h1 class="h1"> 2.1 Properties </h1>
<p> There are numerous window object properties. The primary ones being Navigator object which is designed to contain information about the version of the browser, screen object
which returns information on the display screen's dimensions and color depth, location object which contains the complete URL of a given Window object or, if none is specified, of the
current Window object, History object which is an array of URL strings which reflect the entries in the History object </p>
<h1 class="h1"> Examples </h1>
<p style="margin-left: 100px;"><i>
document.getElementById("pg9").innerHTML = <br>
alert("Screen width is " + screen.width);<br>
document.getElementById("pg9").innerHTML = <br>
alert("Screen height is " + screen.height);<br>
document.getElementById("pg9").innerHTML = <br>
alert("Page location is: " + window.location.href);<br>
document.getElementById("pg9").innerHTML = alert(history.length);<br>
document.getElementById("pg9").innerHTML = <br>
alert("Name is " + navigator.appName +<br>
"\nCode name is " + navigator.appCodeName);<br>
</i>
<br>
<input type=button onClick="example10();" value='Try Me'>
</p>
</div>
<div id="pg10" class="pg">
<h1 class="h1"> 2.2 HTML Objects </h1>
<p> HTML objects (Document Object Model - Level 1) provides a framework through which all HTML documents are represented in a hieracrchical tree-like structure that allow the
programmers to add, remove and modify parts of the web page. An example of an HTML object is Forms. Web forms are used to collect information from the user and send data to a server for
processing.</p>
<h1 class="h1"> General Syntax </h1>
<p> Forms are presented by the form tag element in HTML. The most common elements are fieldset, legend, label, input, textarea, select, button. Here's the general format of a form
- action and method being form attribute and input being the form elements:</p>
<img src="forms.jpg" alt="forms" style="width:404px;height:228px">
<h1 class="h1"> Methods </h1>
<p> Forms have the reset() method which resets a form and the submit() methods which submits a form</p>
<h1 class="h1"> Properties </h1>
<p> Form properties consist of attributes such as action, method, target, autocomplete etc etc. Most common property in a form is action which sets or returns the value of the
action attribute in a form</p>
<h1 class="h1"> Example </h1>
<img src="formex.jpg" alt="formsex" style="width:304x;height:628px">
<p> The functions test if the information entered in the form are valid. Then the form code is included to retrieve the user information. With a button to submit information for
verification. Try the code below</p>
<form action="" name="form1">
Please enter the following details:
<p>
Name:
<br />
<input type="text" name="txtName" onchange="txtName_onchange()" />
</p>
<p>
Age:
<br />
<input type="text" name="txtAge" onblur="txtAge_onblur()"
size="3" maxlength="3" />
</p>
<p>
<input type="button" value="Check Details"
name="btnCheckForm" onclick="btnCheckForm_onclick()">
</p>
</form>
</div>
<div id="pg11" class="pg"> <h1 class="h1"> 2.3 Events </h1> </div>
</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>