编程 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 相关文章推荐

获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft （For:IE5＋ FF1 ）[

Dec 22 Javascript

javaScript同意等待代码实现心得

Jan 01 Javascript

Javascript代码在页面加载时的执行顺序介绍

May 03 Javascript

js string 转 int 注意的问题小结

Aug 15 Javascript

关于onchange事件在IE和FF下的表现及解决方法

Mar 08 Javascript

javascript常用代码段搜集

Dec 04 Javascript

JS验证邮件地址格式方法小结

Dec 01 Javascript

纯js实现瀑布流布局及ajax动态新增数据

Apr 07 Javascript

Ionic3 UI组件之Gallery Modal详解

Jun 07 Javascript

Three.js中网格对象MESH的属性与方法详解

Sep 27 Javascript

js 取消页面可以选中文字的功能方法

Jan 02 Javascript

详细介绍Next.js脚手架完整搭建封装

Apr 26 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+jquery实时显示网站在线人数的方法

2015/01/04 PHP

php验证身份证号码正确性的函数

2016/07/20 PHP

根据邮箱的域名跳转到相应的登录页面的代码

2012/02/27 Javascript

深入理解JavaScript系列（48）：对象创建模式（下篇）

2015/03/04 Javascript

JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)

2015/12/13 Javascript

深入浅出讲解ES6的解构

2016/08/03 Javascript

jQuery实现的鼠标滚轮控制图片缩放功能实例

2017/10/14 jQuery

在Vue项目中引入腾讯验证码服务的教程

2018/04/03 Javascript

JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例

2018/12/14 Javascript

react+ant design实现Table的增、删、改的示例代码

2018/12/27 Javascript

vue滚动固定顶部及修改样式的实例代码

2019/05/30 Javascript

js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome

2020/10/01 Javascript

python 快速排序代码

2009/11/23 Python

Python科学计算环境推荐——Anaconda

2014/06/30 Python

Python中使用 Selenium 实现网页截图实例

2014/07/18 Python

Python中捕捉详细异常信息的代码示例

2014/09/18 Python

python操作redis方法总结

2018/06/06 Python

flask入门之文件上传与邮件发送示例

2018/07/18 Python

python实现微信小程序用户登录、模板推送

2019/08/28 Python

Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项

2019/10/11 Python

python基于plotly实现画饼状图代码实例

2019/12/16 Python

python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例

2020/03/06 Python

python代码中怎么换行

2020/06/17 Python

Selenium之模拟登录铁路12306的示例代码

2020/07/31 Python

详解Pycharm安装及Django安装配置指南

2020/09/15 Python

CSS3实现自定义Checkbox特效实例代码

2017/04/24 HTML / CSS

打造经典复古风格的品牌：Alice + Olivia（爱丽丝+奥利维亚）

2016/09/07 全球购物

英国床和浴室商场：Bed & Bath Emporium

2018/05/20 全球购物

如何查看在weblogic中已经发布的EJB

2012/06/01 面试题

Servlet的实例是在生命周期什么时候创建的？配置servlet最重要的是什么？

2012/05/30 面试题

教师实习自我鉴定

2013/12/14 职场文书

公司中层管理培训心得体会

2016/01/11 职场文书

Python实现排序方法常见的四种

2021/07/15 Python

Python中Numpy和Matplotlib的基本使用指南

2021/11/02 Python

vue实现移动端div拖动效果

2022/03/03 Vue.js

Axios代理配置及封装响应拦截处理方式

2022/04/07 Vue.js