选择并转移导航菜单的方法有很多,本例使用 js 来实现选择并转移导航菜单, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
实现 html 界面
- <!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>
实现菜单导航
- 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;
- }
- }
下面是源码分析
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。
来源: