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 面向对象继承
Nov 26 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
深入理解Javascript中的循环优化
Nov 09 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 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
开源SNS系统-ThinkSNS
2008/05/18 PHP
百度地图API使用方法详解
2015/08/25 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python判断某个用户对某个文件的权限
2016/10/13 Python
numpy数组拼接简单示例
2017/12/15 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
python 代码运行时间获取方式详解
2020/09/18 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
联谊会主持词
2014/03/26 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
工伤事故证明
2014/10/20 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL