js选择并转移导航菜单示例代码_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:39 PM

导航菜单转移选择

实现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但不让它做任何事情的最简单的方法。与任何函数中一样，花括号包含函数的内容。这里的花括号是空的，因为这个函数不做任何事情。

document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
在initForm()函数中，第一行获得HTML页面上的菜单（它的id为newLocation），并且将它的selectedIndex属性设置为零，这会使它显示Select a topic。
第二行让脚本在菜单选择发生改变时，调用jumpPage()函数。

var newLoc = document.getElementById("newLocation");
在jumpPage()函数中，newLoc变量查找访问者在菜单中选择的值。

var newPage = newLoc.options[newLoc.selectedIndex].value;
从方括号中的代码开始，向外依次分析。newLoc.selectedIndex是一个从0～5的数字（因为有6
个菜单选项。记住JavaScript的编号常常是基于零的）。得到这个数字之后，接下来获得对应的菜单项
的值，这就是我们希望跳转到的网页的名称。然后，将结果赋值给变量newPage。

if (newPage != "") {
window.location = newPage;
这个条件语句首先检查newPage是否非空。换句话说，如果newPage有一个值，那么让窗口转到
选择的菜单项所指定的URL。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

iBatis和MyBatis：哪个更适合你？Feb 19, 2024 pm 04:38 PM

iBatis与MyBatis：你应该选择哪个？简介：随着Java语言的快速发展，许多持久化框架也应运而生。iBatis和MyBatis是两个备受欢迎的持久化框架，它们都提供了一种简单而高效的数据访问解决方案。本文将介绍iBatis和MyBatis的特点和优势，并给出一些具体的代码示例，帮助你选择合适的框架。iBatis简介：iBatis是一个开源的持久化框架

CS玩家的首选：推荐的电脑配置Jan 02, 2024 pm 04:26 PM

1.处理器在选择电脑配置时，处理器是至关重要的组件之一。对于玩CS这样的游戏来说，处理器的性能直接影响游戏的流畅度和反应速度。推荐选择IntelCorei5或i7系列的处理器，因为它们具有强大的多核处理能力和高频率，可以轻松应对CS的高要求。2.显卡显卡是游戏性能的重要因素之一。对于射击游戏如CS而言，显卡的性能直接影响游戏画面的清晰度和流畅度。建议选择NVIDIAGeForceGTX系列或AMDRadeonRX系列的显卡，它们具备出色的图形处理能力和高帧率输出，能够提供更好的游戏体验3.内存电

红米Redmi K70如何打开存储权限？Feb 23, 2024 pm 12:30 PM

红米RedmiK70是很多用户们都在使用的机型，这款手机自从发布以来一直都保持着很不错的口碑，拥有着超高的性价比。当然，除了性价比以外，红米RedmiK70还有着许多非常实用的功能。那么红米RedmiK70怎么打开存储权限呢？接下来就让小编来为大家介绍一下吧！红米RedmiK70怎么打开存储权限？要打开红米RedmiK70的存储权限，你可以按照以下步骤操作：步骤一：打开手机的设置应用。步骤二：向下滚动并找到“应用管理”或“应用和通知”，然后点击进入。步骤三：在应用管理中，找到你想要打开存储权限的

kafka可视化工具对比分析：如何选择最合适的工具？Jan 05, 2024 pm 12:15 PM

如何选择合适的Kafka可视化工具？五款工具对比分析引言：Kafka是一种高性能、高吞吐量的分布式消息队列系统，被广泛应用于大数据领域。随着Kafka的流行，越来越多的企业和开发者需要一个可视化工具来方便地监控和管理Kafka集群。本文将介绍五款常用的Kafka可视化工具，并对比它们的特点和功能，帮助读者选择适合自己需求的工具。一、KafkaManager

揭秘Pip镜像源：如何选择最适合个人需求的镜像源？Jan 16, 2024 am 09:26 AM

Pip镜像源大揭秘：如何选择最适合你的镜像源？简介：Pip是Python中最常用的软件包管理工具之一，能够方便地安装、升级和移除Python包。在使用Pip的过程中，选择适合自己的镜像源可以显著提高安装速度和稳定性。本文将为大家介绍常见的几种镜像源，并提供具体的代码示例，以便读者可以轻松选择最适合自己的镜像源。一、什么是镜像源？在使用Pip

Win11 24H2更新失败了解决方法？Win11 24H2更新失败了问题解析Feb 23, 2024 am 10:30 AM

Win1124H2更新失败了怎么办是很多用户们在询问的一个问题，可能是用户们的硬件要求不足的情况，由于现在还没正式发布Win1124H2版本，用户们可以选择安装win1123h2的最新版本，下面就让本站来为用户们来仔细的介绍一下Win1124H2更新失败了问题解析吧。Win1124H2更新失败了问题解析可能是用户们的电脑硬件要求不足的情况，用户们可以下载石大师装机工具或者是系统之家装机工具来进行安装。但是由于现在win1124h2版本还没正式的发布，用户们可以选择安装win1123h2最新版本来

在大数据场景下的MySQL储存引擎选择：MyISAM、InnoDB、Aria对比分析Jul 24, 2023 pm 07:18 PM

在大数据场景下的MySQL储存引擎选择：MyISAM、InnoDB、Aria对比分析随着大数据时代的到来，传统的储存引擎在面对高并发、大数据量的情况下往往无法满足业务需求。MySQL作为最流行的关系型数据库管理系统之一，其储存引擎的选择显得尤为重要。在本文中，我们将对大数据场景下MySQL常用的储存引擎MyISAM、InnoDB、Aria进行对比分析，并给出

为什么学习Python是一个明智的职业选择？Sep 08, 2023 pm 01:45 PM

为什么学习Python是一个明智的职业选择？Python，作为一门易学易用且功能强大的编程语言，正日益成为职场人士的首选。无论你是初学者还是有一定编程经验的专业人士，学习Python都是一个明智的职业选择。本文将探讨学习Python的优势，并提供一些Python代码示例来帮助读者更好地理解。Python的易学性相比其他编程语言，Python具备非常低的学习曲

See all articles