编程 Javascript

javascript实现跳转菜单的具体方法

Posted in Javascript onJuly 05, 2013

传统

这里要做的是，省略Go There按钮，选择菜单项后，直接跳转。

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>转移菜单</title>  
<script type="text/javascript" src="转移菜单.js"></script>  
</head>  
<body>  
<form>  
  <select id="newLocation">  
    <option selected="selected" value="">Select a topic</option>  
    <option value="topic1.html">topic1</option>  
    <option value="topic2.html">topic2</option>  
    <option value="topic3.html">topic3</option>  
    <option value="topic4.html">topic4</option>  
    <option value="topic5.html">topic5</option>  
  </select>  
  <!--当浏览器不支持javascript或者禁用脚本运行时被调用-->  
 <noscript>  
    <input type="submit" value="Go There!"/>  
 </noscript>  
</form>  
</body>  
</html>

Javascript脚本

window.onload=initForm;  
//防止页面缓存，无法触发onload   
window.onunload=function(){}  
    function initForm(){  
        document.getElementById("newLocation").selectIndex=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;  
            }  
        }

javascript实现跳转菜单的具体方法

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

很棒的学习jQuery的12个网站推荐

Apr 28 Javascript

两种常用的javascript数组去重方法思路及代码

Mar 26 Javascript

javascript获取元素偏移量的方法有哪些

Jun 24 Javascript

小米公司JavaScript面试题

Dec 29 Javascript

javascript实现相同事件名称，不同命名空间的调用方法

Jun 26 Javascript

JS+CSS实现的日本门户网站经典选项卡导航效果

Sep 27 Javascript

jQuery简单实现彩色云标签效果示例

Aug 01 Javascript

详解JavaScript权威指南之对象

Sep 27 Javascript

Kindeditor单独调用多图上传实例

Jul 31 Javascript

vue给组件传递不同的值方法

Sep 29 Javascript

微信小程序实现跳转的几种方式总结（推荐）

Apr 24 Javascript

JavaScript中document.activeELement焦点元素介绍

Nov 27 Javascript

JavaScript获取和设置CheckBox状态的简单方法

Jul 05 #Javascript

JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享

Jul 05 #Javascript

JS 精确统计网站访问量的实例代码

Jul 05 #Javascript

如何使用jQuery Draggable和Droppable实现拖拽功能

Jul 05 #Javascript

基于JavaScript 下namespace 功能的简单分析

Jul 05 #Javascript

javascript基础之查找元素的详细介绍(访问节点)

Jul 05 #Javascript

js文件缓存之版本管理详解

Jul 05 #Javascript

You might like

php 8小时时间差的解决方法小结

2009/12/22 PHP

PHP用mysql数据库存储session的代码

2010/03/05 PHP

php下连接ftp实现文件的上传、下载、删除文件实例代码

2010/06/03 PHP

PHP常用数组函数介绍

2014/07/28 PHP

PHP批斗大会之缺失的异常详解

2019/07/09 PHP

jQuery选择没有colspan属性的td的代码

2010/07/06 Javascript

jQuery判断元素上是否绑定了指定事件的方法

2015/03/17 Javascript

require.js 加载 vue组件 r.js 合并压缩的实例

2016/10/14 Javascript

JS实现仿UC浏览器前进后退效果的实例代码

2017/07/17 Javascript

十个免费的web前端开发工具详细整理

2017/09/18 Javascript

Vue from-validate 表单验证的示例代码

2017/09/26 Javascript

详谈构造函数加括号与不加括号的区别

2017/10/26 Javascript

element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)

2019/01/15 Javascript

node.js中fs文件系统模块的使用方法实例详解

2020/02/13 Javascript

Vue之封装公用变量以及实现方式

2020/07/31 Javascript

antdesign-vue结合sortablejs实现两个table相互拖拽排序功能

2021/01/08 Vue.js

Python实现微信公众平台自定义菜单实例

2015/03/20 Python

python实现解数独程序代码

2017/04/12 Python

Python三级菜单的实例

2017/09/13 Python

Python编程求解二叉树中和为某一值的路径代码示例

2018/01/04 Python

Flask框架响应、调度方法和蓝图操作实例分析

2018/07/24 Python

pandas DataFrame 删除重复的行的实现方法

2019/01/29 Python

在django模板中实现超链接配置

2019/08/21 Python

解析Python3中的Import

2019/10/13 Python

关于pytorch中全连接神经网络搭建两种模式详解

2020/01/14 Python

利用python控制Autocad:pyautocad方式

2020/06/01 Python

Python实现对word文档添加密码去除密码的示例代码

2020/12/29 Python

泰国最新活动和优惠：Megatix

2020/05/07 全球购物

斯福泰克软件测试面试题

2015/02/16 面试题

50岁生日感言

2014/01/23 职场文书

本科应届生求职信

2014/08/05 职场文书

安全生产工作汇报

2014/10/28 职场文书

简历中的自我评价怎么写呢？

2019/04/30 职场文书

2019年教师节活动策划方案

2019/09/09 职场文书

导游词之西安骊山

2019/12/03 职场文书

python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析

2021/04/14 Python