js选择并转移导航菜单示例代码_javascript技巧
Select and Go 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; } }
下面是源码分析
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。
推荐阅读
-
js取两个数组的交集|差集|并集|补集|去重示例代码_javascript技巧
-
顶部缓冲下拉菜单导航特效的JS代码_javascript技巧
-
js带按钮的提示框可供选择示例代码_javascript技巧
-
css结合js制作下拉菜单示例代码_javascript技巧
-
js带按钮的提示框可供选择示例代码_javascript技巧
-
JS下拉缓冲菜单示例代码_javascript技巧
-
顶部缓冲下拉菜单导航特效的JS代码_javascript技巧
-
js判断选择时间不能小于当前时间的示例代码_javascript技巧
-
js一般方法改写成面向对象方法的无限级折叠菜单示例代码_javascript技巧
-
js禁止页面复制功能禁用页面右键菜单示例代码_javascript技巧