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 相关文章推荐
JavaScript经典效果集锦
Jul 06 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
RequireJS用法简单示例
Aug 20 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 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公用函数列表[正则]
2007/02/22 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
JS与框架页的操作代码
2010/01/17 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
Python中字典和JSON互转操作实例
2015/01/19 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
出国考察邀请函
2014/01/21 职场文书
教师专业自荐书范文
2014/02/10 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
行政文员岗位职责
2015/02/04 职场文书
Nginx实现会话保持的两种方式
2022/03/18 Servers
Github 使用python对copilot做些简单使用测试
2022/04/14 Python