js选择并转移导航菜单示例代码
作者:whsnow 发布时间:2024-02-23 10:23:54
实现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。
猜你喜欢
- buffer:下载数据缓冲区,以字节为单位,缺省依赖操作系统 consistent:下载期间所涉及的数据保持read only,缺省为n d
- 阅读上一篇:成为一个顶级设计师的第一准则限制你的色彩成为一个顶级设计师的7个简单原则的第二部分限制使用你的色彩。好象上个准则是让你限制用你的
- Flask-Admin是Flask框架的一个扩展,用它能够快速创建Web管理界面,它实现了比如用户、文件的增删改查等常用的管理功能;如果对它
- 需求是在某一指定的时刻执行操作网上的建议多为通过调用Scheduler的add_date_job实现不过APScheduler 3.0.1与
- 本文实例讲述了Python实现爬取逐浪小说的方法。分享给大家供大家参考。具体分析如下:本人喜欢在网上看小说,一直使用的是小说下载阅读器,可以
- 前言最近参加了datawhale的组队学习活动,在组队学习动员下,开始通过强迫自己输出来实现更好的输入与处理,6-15开始自己的第一次文章发
- 本文实例讲述了Python3多进程 multiprocessing 模块。分享给大家供大家参考,具体如下:多进程 Multiprocessi
- 由于pytorch的whl 安装包名字都一样,所以我们很难区分到底是基于cuda 的哪个版本。有一条指令可以查看import torchpr
- 一.问题描述在二维数组的遍历中,我们经常使用双层for循环。在某些时候,我们并不需要遍历整个二维数组。当条件满足时就应该终止for循环。但是
- 很多组织机构慢慢的在不同的服务器和地点部署SQL Server数据库——为各种应用和目的&m
- 本文实例讲述了python中反射用法。分享给大家供大家参考。具体如下:import sys, types,newdef _get_mod(m
- 本文实例讲述了Python3.5内置模块之os模块、sys模块、shutil模块用法。分享给大家供大家参考,具体如下:1、os模块:提供对操
- Python字符串处理学习中,有一道简单但很经典的题目,按照单词对字符串进行反转,并对原始空格进行保留: 如:‘ I love China!
- 前言本博主将用CSDN记录软件开发求学之路上亲身所得与所学的心得与知识,有兴趣的小伙伴可以关注博主!也许一个人独行,可以走的很快,但是一群人
- 背景:不久前,设计实现了京东api的功能,发现如果换了其它快递再重新设计,岂不是会浪费太多的时间,所以选个第三方提供的快递API是最为合理的
- 直接搭建网络必须与torchvision自带的网络的权重也就是pth文件的结构、尺寸和变量命名完全一致,否则无法加载权重文件。此时可比较2个
- 本文实例讲述了thinkPHP框架通过Redis实现增删改查操作的方法。分享给大家供大家参考,具体如下:一、概述Redis是一个NoSQL数
- 本文实例讲述了Python实现的读写json文件功能。分享给大家供大家参考,具体如下:相比java,python对json文件的处理就简单很
- 客户端程序编写免不了经常接触XMLHttpRequest对象。微软的XHR实现的progid又是一串一串的。 烦人。抽一个中午时间,找了找资
- 淘宝的投诉类型里有这么一条“收款不发货”。帮助中心里是这么解释的:买、卖双方在淘宝上成交后,当卖家在收到买家汇款后没有按时履行发货义务,或买