js select and transfer navigation menu sample code_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

js select and transfer navigation menu sample code_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:39 PM

Navigation menutransferchoose

Implement html interface

<!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>

Implement menu navigation

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;
}
}

The following is the source code analysis
1.

window.onload = initForm;
window.onunload = function() {};
When the window loads, the initForm() function is called. The next line needs some explanation, as it's a workaround to deal with weird behavior of some browsers.

When the window is unloaded (that is, the window is closed or the browser goes to another URL), we call an anonymous function, that is, a function without a name. In this example, the function not only has no name, but it also doesn't do anything at all. This function is provided because onunload must be set to something, otherwise, when the browser's back button is clicked, the onload event will not be triggered because the page will be cached in some browsers (such as Firefox and Safari) . Letting onunload do anything will cause the page to not be cached, so when the user backs off, the onload event will occur.

Anonymous means there is no name between function and (). This is the simplest way to trigger onunload but not let it do anything. As in any function, curly braces contain the contents of the function. The curly braces here are empty because this function doesn't do anything.

document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
In the initForm() function, the first line gets the menu on the HTML page (its id is newLocation) and sets its selectedIndex property to zero, which causes it to display Select a topic.
The second line tells the script to call the jumpPage() function when the menu selection changes.

var newLoc = document.getElementById("newLocation");
In the jumpPage() function, the newLoc variable looks for the value the visitor selected in the menu.

var newPage = newLoc.options[newLoc.selectedIndex].value;
Start with the code in square brackets and work your way outward. newLoc.selectedIndex is a number from 0 to 5 (because there are 6
menu options. Remember that JavaScript numbering is often zero-based). After getting this number, get the corresponding menu item
The value of , this is the name of the web page we want to jump to. Then, assign the result to the variable newPage.

if (newPage != "") {
window.location = newPage;
This conditional statement first checks whether newPage is not empty. In other words, if newPage has a value, let the window go to
The URL specified by the selected menu item.

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact 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

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

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

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

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

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

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

See all articles