js实现选择并转移导航菜单

首先先看一下源码吧

脚本1 是实现html界面

<!DOCTYPE html>
<html>
<head>
<title>Select and Go Navigation</title>
<script src="script01.js"></script>
<link rel="stylesheet" href="script01.css">
</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> 

脚本2 js实现菜单导航

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()函数。下一行需要解释一下,因为它是处理某些浏览器的古怪行
为的变通方法。
当窗口卸载时(即关闭窗口或者浏览器转到另一个网址),我们调用一个匿名函数(anonymous
function),即没有名称的函数。在这个示例中,这个函数不但没有名称,而且根本不做任何事情。提
供这个函数是因为必须将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。




  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值