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 相关文章推荐
javascript 验证日期的函数
Mar 18 Javascript
Javascript JSQL,SQL无处不在,
May 05 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
React Router基础使用
Jan 17 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
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实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
浅析php工厂模式
2014/11/25 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
浅谈Python 的枚举 Enum
2017/06/12 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
学python安装的软件总结
2019/10/12 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
体操比赛口号
2014/06/10 职场文书
优秀员工推荐材料
2014/12/20 职场文书
先进个人材料怎么写
2014/12/30 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
二审答辩状范文
2015/05/22 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
Vue全局事件总线你了解吗
2022/02/24 Vue.js
MySQL数据库 安全管理
2022/05/06 MySQL