您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
js选择并转移导航菜单示例代码
作者：佚名 责任编辑：admin 更新时间：2022-06-22
实现html界面
01 <!DOCTYPE html> 02 <html> 03 <head> 04 <title>Select and Go Navigation</title> 05 <script src="script01.js"></script> 06 <link rel="stylesheet" href="script01.css" rel="external nofollow" > 07 </head> 08 <body> 09 <form action="gotoLocation.cgi" class="centered"> 10 <select id="newLocation"> 11 <option selected>Select a topic</option> 12 <option value="script06.html">Cross-checking fields</option> 13 <option value="script07.html">Working with radio buttons</option> 14 <option value="script08.html">Setting one field with another</option> 15 <option value="script09.html">Validating Zip codes</option> 16 <option value="script10.html">Validating email addresses</option> 17 </select> 18 <noscript> 19 <input type="submit" value="Go There!"> 20 </noscript> 21 </form> 22 </body> 23 </html>实现菜单导航
01 window.onload = initForm; 02 window.onunload = function() {}; 03 function initForm() { 04 document.getElementById("newLocation").selectedIndex = 0; 05 document.getElementById("newLocation").onchange = jumpPage; 06 } 07 function jumpPage() { 08 var newLoc = document.getElementById ("newLocation"); 09 var newPage = newLoc.options [newLoc.selectedIndex].value; 10 if (newPage != "") { 11 window.location = newPage; 12 } 13 }下面是源码分析
1.
window.onload = initForm;
window.onunload = function() {};
在窗口加载时，调用initForm()函数。下一行需要解释一下，因为它是处理某些浏览器的古怪行为的变通方法。
当窗口卸载时（即关闭窗口或者浏览器转到另一个网址），我们调用一个匿名函数（anonymousfunction），即没有名称的函数。在这个示例中，这个函数不但没有名称，而且根本不做任何事情。提供这个函数是因为必须将onunload设置为某种东西，否则，当单击浏览器的back按钮时，就不会触发onload事件，因为在某些浏览器（比如Firefox和Safari）中页面会被缓存。让onunload执行任何操作，就会使页面不被缓存，因此当用户后退时，会发生onload事件。
匿名是指在function和()之间没有名称。这是触发onunload但不让它做任何事情的最简单的方法。与任何函数中一样，花括号包含函数的内容。这里的花括号是空的，因为这个函数不做任何事情。
2.
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
在initForm()函数中，第一行获得HTML页面上的菜单（它的id为newLocation），并且将它的selectedIndex属性设置为零，这会使它显示Select a topic。
第二行让脚本在菜单选择发生改变时，调用jumpPage()函数。
3.
var newLoc = document.getElementById("newLocation");
在jumpPage()函数中，newLoc变量查找访问者在菜单中选择的值。
4.
var newPage = newLoc.options[newLoc.selectedIndex].value;
从方括号中的代码开始，向外依次分析。newLoc.selectedIndex是一个从0～5的数字（因为有6
个菜单选项。记住JavaScript的编号常常是基于零的）。得到这个数字之后，接下来获得对应的菜单项
的值，这就是我们希望跳转到的网页的名称。然后，将结果赋值给变量newPage。
5.
if (newPage != "") {
window.location = newPage;
这个条件语句首先检查newPage是否非空。换句话说，如果newPage有一个值，那么让窗口转到
选择的菜单项所指定的URL。
- 上一个程序编程： IE中使用JavaScript中调用form.submit()提示“对象不支持此属性和方法”
- 下一个程序编程： 用JavaScript实现使用鼠标画线的示例代码
