您的位置：首页 > Web前端 > JavaScript

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

2014-08-01 14:22 323 查看
首先先看一下源码吧

脚本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。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航