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

js选择并转移导航菜单示例代码

2014-08-20 15:42 591 查看
实现html界面

view sourceprint?01 <!DOCTYPE html>  

www.555le.com

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> 

实现菜单导航

view sourceprint?01 window.onload = initForm;  

02 window.onunload = function() {};  

03 function initForm() {  

www.fanyaylc.com

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。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息