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


Posted in Javascript onAugust 19, 2014

实现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。

Javascript 相关文章推荐
UserData用法总结 lanyu出品
Jul 01 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
Javascript 构造函数详解
Oct 22 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 Javascript
js遍历子节点子元素附属性及方法
Aug 19 #Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 #Javascript
用循环或if语句从json中取数据示例
Aug 18 #Javascript
通过jquery 获取URL参数并进行转码
Aug 18 #Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 #Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 #Javascript
使用node.js半年来总结的 10 条经验
Aug 18 #Javascript
You might like
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
JS实现的排列组合算法示例
2019/07/16 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
全球立体声:World Wide Stereo
2018/09/29 全球购物
尼克松手表官网:Nixon手表
2019/03/17 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
软件测试面试题
2015/10/21 面试题
J2EE相关知识面试题
2013/08/26 面试题
初一学生评语大全
2014/04/24 职场文书
数字化校园建设方案
2014/05/03 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
入党申请书怎么写?
2019/06/11 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android
基于Python编写一个监控CPU的应用系统
2022/06/25 Python