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 相关文章推荐
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 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下escape解码函数的实现方法
2010/08/08 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
python文件编写好后如何实践
2020/07/07 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
夜大毕业生自我评价分享
2013/11/10 职场文书
资料员的岗位职责
2013/11/20 职场文书
酒吧副总经理岗位职责
2013/12/10 职场文书
教师的实习鉴定
2013/12/15 职场文书
村委会贫困证明
2014/01/14 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
V Rising 服务器搭建图文教程
2022/06/16 Servers