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


Posted in Javascript onJuly 05, 2013

传统

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

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

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

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 相关文章推荐
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
VSCode 配置uni-app的方法
Jul 11 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
西德产收音机
2021/03/01 无线电
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
php 数组的创建、调用和更新实现代码
2009/03/09 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
深入php list()函数的详解
2013/06/05 PHP
PHP微信支付实例解析
2016/07/22 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
Python for循环及基础用法详解
2019/11/08 Python
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
军训 自我鉴定
2014/02/03 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
协议书与合同的区别
2014/04/18 职场文书
教研处工作方案
2014/05/26 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
Go语言测试库testify使用学习
2022/07/23 Golang