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

MSN消息提示类

Sep 05 Javascript

理解JavaScript的caller,callee,call,apply

Apr 28 Javascript

js控制滚动条缓慢滚动到顶部实现代码

Mar 20 Javascript

探讨jQuery的ajax使用场景(c#)

Dec 03 Javascript

IE9+已经不对document.createElement向下兼容的解决方法

Sep 14 Javascript

微信小程序后台https域名绑定和免费的https证书申请详解

Nov 10 Javascript

详解jQuery事件

Jan 13 Javascript

JS控件bootstrap datepicker使用方法详解

Mar 25 Javascript

详解Angular2响应式表单

Jun 14 Javascript

小程序登录/注册页面设计的实现代码

May 24 Javascript

jQuery实现移动端图片上传预览组件的方法分析

May 01 jQuery

详解vue中v-on事件监听指令的基本用法

Jul 22 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设计模式 DAO(数据访问对象模式)

2011/06/26 PHP

ThinkPHP5.0框架使用build 自动生成模块操作示例

2019/04/11 PHP

Laravel5.1 框架Request请求操作常见用法实例分析

2020/01/04 PHP

laravel admin实现分类树/模型树的示例代码

2020/06/10 PHP

复制网页内容，粘贴之后自动加上网址的实现方法(脚本之家特别整理)

2014/10/16 Javascript

javascript的函数作用域

2014/11/12 Javascript

Javascript实现Web颜色值转换

2015/02/05 Javascript

js控制文本框只输入数字和小数点的方法

2015/03/10 Javascript

JavaScript中的方法重载实例

2015/03/16 Javascript

基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用

2016/05/12 Javascript

Javascript 5种方法实现过滤删除前后所有空格

2016/06/22 Javascript

AngularJS入门教程之链接与图片模板详解

2016/08/19 Javascript

谈谈Vue.js——vue-resource全攻略

2017/01/16 Javascript

video.js使用改变ui过程

2017/03/05 Javascript

利用SpringMVC过滤器解决vue跨域请求的问题

2018/02/10 Javascript

使用vue-cli打包过程中的步骤以及问题的解决

2018/05/08 Javascript

了解ESlint和其相关操作小结

2018/05/21 Javascript

Vue-Router基础学习笔记(小结)

2018/10/15 Javascript

JavaScript中的事件与异常捕获详析

2019/02/24 Javascript

Vue父子组件传值的一些坑

2020/09/16 Javascript

Python图像处理之gif动态图的解析与合成操作详解

2018/12/30 Python

python爬取酷狗音乐排行榜

2019/02/20 Python

Django 内置权限扩展案例详解

2019/03/04 Python

Python3.5字符串常用操作实例详解

2019/05/01 Python

Python单例模式的四种创建方式实例解析

2020/03/04 Python

python安装和pycharm环境搭建设置方法

2020/05/27 Python

使用html5实现表格实现标题合并的实例代码

2019/05/13 HTML / CSS

美国眼镜网站：LensCrafters

2020/01/19 全球购物

市场营销专业个人自荐信格式

2013/09/21 职场文书

农村婚礼证婚词

2014/01/10 职场文书

金融行业职业生涯规划范文

2014/01/17 职场文书

新郎婚宴答谢词

2014/01/19 职场文书

党委领导班子整改方案

2014/09/30 职场文书

2015年综治宣传月活动总结

2015/03/25 职场文书

房地产工程部经理岗位职责

2015/04/09 职场文书

Python 使用dict实现switch的操作

2021/04/07 Python