Home > Article > Web Front-end > js select and transfer navigation menu sample code_javascript skills

js select and transfer navigation menu sample code_javascript skills

WBOYOriginal: 2016-05-16 16:39:191146browse

Implement html interface

<!DOCTYPE html>
<html>
<head>
<title>Select and Go Navigation</title>
<script src="script01.js"></script>
<link rel="stylesheet" href="script01.css" rel="external nofollow" >
</head>
<body>
<form action="gotoLocation.cgi" class="centered">
<select id="newLocation">
<option selected>Select a topic</option>
<option value="script06.html">Cross-checking fields</option>
<option value="script07.html">Working with radio buttons</option>
<option value="script08.html">Setting one field with another</option>
<option value="script09.html">Validating Zip codes</option>
<option value="script10.html">Validating email addresses</option>
</select>
<noscript>
<input type="submit" value="Go There!">
</noscript>
</form>
</body>
</html>

Implement menu navigation

window.onload = initForm;
window.onunload = function() {};
function initForm() {
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
}
function jumpPage() {
var newLoc = document.getElementById ("newLocation");
var newPage = newLoc.options [newLoc.selectedIndex].value;
if (newPage != "") {
window.location = newPage;
}
}

The following is the source code analysis
1.

window.onload = initForm;
window.onunload = function() {};
When the window loads, the initForm() function is called. The next line needs some explanation, as it's a workaround to deal with weird behavior of some browsers.

When the window is unloaded (that is, the window is closed or the browser goes to another URL), we call an anonymous function, that is, a function without a name. In this example, the function not only has no name, but it also doesn't do anything at all. This function is provided because onunload must be set to something, otherwise, when the browser's back button is clicked, the onload event will not be triggered because the page will be cached in some browsers (such as Firefox and Safari) . Letting onunload do anything will cause the page to not be cached, so when the user backs off, the onload event will occur.

Anonymous means there is no name between function and (). This is the simplest way to trigger onunload but not let it do anything. As in any function, curly braces contain the contents of the function. The curly braces here are empty because this function doesn't do anything.

document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
In the initForm() function, the first line gets the menu on the HTML page (its id is newLocation) and sets its selectedIndex property to zero, which causes it to display Select a topic.
The second line tells the script to call the jumpPage() function when the menu selection changes.

var newLoc = document.getElementById("newLocation");
In the jumpPage() function, the newLoc variable looks for the value the visitor selected in the menu.

var newPage = newLoc.options[newLoc.selectedIndex].value;
Start with the code in square brackets and work your way outward. newLoc.selectedIndex is a number from 0 to 5 (because there are 6
menu options. Remember that JavaScript numbering is often zero-based). After getting this number, get the corresponding menu item
The value of , this is the name of the web page we want to jump to. Then, assign the result to the variable newPage.

if (newPage != "") {
window.location = newPage;
This conditional statement first checks whether newPage is not empty. In other words, if newPage has a value, let the window go to
The URL specified by the selected menu item.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Solution to the failure exception when using Ajax to assign values to global variables in JQuery_jqueryNext article：Solution to the failure exception when using Ajax to assign values to global variables in JQuery_jquery

See more

js select and transfer navigation menu sample code_javascript skills

Related articles