Home > Developer > JavaScript
Js select and transfer the navigation menu sample code, js navigation menu sample code
Implement html Interface
<!DOCTYPE html>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 (){};
Call the initForm () function when loading the window. The next line needs to be explained, because it is a work und to handle the odd behavior of Some browsers.When the window is uninstalled (close the window or switch the browser to another website), we call an anonymous function (anonymousfunction), that is, a function without a name. In this example, this function has no name, and does not do anything at all. This function is provided because onunload must be set to something. Otherwise, the onload event will not be triggered when you click the back button of the browser, because in some browsers (such as Firefox and Safari) the page is cached. If you enable onunload to perform any operation, the page will not be cached. Therefore, an onload event will occur when the user returns.
Anonymous means that there is no name between function and. This is the easiest way to trigger onunload but not let it do anything. Like any function, curly braces contain the content of the function. The curly braces here are empty, because this function does not do anything.
2.
Document. getElementById ("newLocation"). selectedIndex = 0;
Document. getElementById ("newLocation"). onchange = jumpPage;
In the initForm () function, obtain the menu on the HTML page (its id is newLocation) In the first line, and set its selectedIndex attribute to zero, this will display the Select a topic.
In the second line, let the script call the jumpPage () function when the menu is changed.3.
Var newLoc = document. getElementById ("newLocation ");
In the jumpPage () function, the newLoc variable finds the value selected by the visitor in the menu.4.
Var newPage = newLoc. options [newLoc. selectedIndex]. value;
Start with the code in square brackets and analyze it in sequence. NewLoc. selectedIndex is ~ 5 digits (because there are 6
Menu options. Remember that JavaScript numbers are often zero-based ). After this number is obtained, the corresponding menu item is obtained.
This is the name of the webpage we want to jump. Then, assign the result to the variable newPage.5.
If (newPage! = ""){
Window. location = newPage;
This condition statement first checks whether newPage is not empty. In other words, if newPage has a value, convert the window
The URL specified by the selected menu item.
Js navigation menu code,TabCon = $ _ class ("sub_zzjs"). getElementsByTagName ("ul ");
Therefore, tabCon is a set of ul elements.
TabCon [o] is the o-th element in the set.
Is the js source code of the navigation level-2 menu urgently needed?There is a multi-level linkage drop-down menu for js.
It is more practical to customize positions and styles.
The tutorials and source code are provided.
Reference: www.blueidea.com/..20.11931
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
