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 相关文章推荐
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
实例讲解React 组件
Jul 07 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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
Python中functools模块函数解析
2017/03/12 Python
python定位xpath 节点位置的方法
2019/08/27 Python
python实现飞机大战小游戏
2019/11/08 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
物流管理专业求职信
2014/05/29 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
工作检讨书500字
2014/10/19 职场文书
投资入股合作协议书
2014/10/28 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
工作犯错保证书
2015/05/11 职场文书
python 对图片进行简单的处理
2021/06/23 Python
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android