脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 选择并转移导航菜单

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

 更新时间：2014年08月19日 11:15:54   投稿：whsnow  
选择并转移导航菜单的方法有很多，本例使用js来实现选择并转移导航菜单,需要的朋友可以参考下

实现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。

您可能感兴趣的文章:

相关文章

  • 关于webpack代码拆分的解析

    关于webpack代码拆分的解析

    本篇文章主要介绍了关于webpack代码拆分的解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JS 各种网页尺寸判断实例方法

    JS 各种网页尺寸判断实例方法

    JS 各种网页尺寸判断实例方法，需要的朋友可以参考一下
    2013-04-04
  • 详解JavaScript类型判断的四种方法

    详解JavaScript类型判断的四种方法

    这篇文章主要介绍了JavaScript类型判断的四种方法，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
    2020-10-10
  • javascript每日必学之封装

    javascript每日必学之封装

    javascript每日必学之封装，介绍了有关封装的相关内容，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • Bootstrap3.0建站教程(一)之bootstrap表单元素排版

    Bootstrap3.0建站教程(一)之bootstrap表单元素排版

    本文给大家介绍Bootstrap3.0建站教程(一)之bootstrap表单元素排版，本文给大家列举了文字和输入框前后排列和上下排列的实例代码，有需要的朋友参考下吧
    2016-06-06
  • JS实现单例模式的6种方案汇总

    JS实现单例模式的6种方案汇总

    单例模式的定义是保证一个类仅有一个实例,下面这篇文章主要给大家介绍了关于JS实现单例模式的6种方案,需要的朋友可以参考下
    2021-05-05
  • 由JavaScript技术实现的web小游戏（不含网游）

    由JavaScript技术实现的web小游戏（不含网游）

    伴随Ajax与网页游戏的崛起，曾几何时JavaScript也成了游戏开发时可供选择的技术之一，文本 仅列举数项由JavaScript技术实现的web小游戏（不含网游），聊作参考之用。
    2010-06-06
  • 深入了解Hybrid App技术的相关知识

    深入了解Hybrid App技术的相关知识

    这篇文章主要介绍了深入了解Hybrid App技术的相关知识，Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具" Native App良好用户交互体验的优势 "和" Web App跨平台开发的优势 ",需要的朋友可以参考下
    2019-07-07
  • 使用JavaScript操作Visual Viewport的方法示例

    使用JavaScript操作Visual Viewport的方法示例

    在现代前端开发中,视口（viewport）是一个非常重要的概念,它决定了用户在浏览网页时所看到的内容,JavaScript 提供了一个强大的接口 —— Visual Viewport API,让开发者可以更灵活地控制和获取视口的信息,本文将详细介绍如何使用 Visual Viewport API
    2024-09-09
  • 在JavaScript中添加css样式(js追加类)代码示例

    在JavaScript中添加css样式(js追加类)代码示例

    这篇文章主要给大家介绍了关于在JavaScript中如何添加css样式,也就是js追加类的相关资料,JavaScript是一种广泛应用于互联网开发的编程语言,它能够帮助网页实现动态效果和交互性,需要的朋友可以参考下
    2024-01-01

最新评论