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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
微信小程序block的使用教程
Apr 01 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
vue常用高阶函数及综合实例
Feb 25 Vue.js
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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
十天学会php之第五天
2006/10/09 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
关于毕业的广播稿
2014/01/10 职场文书
个人函授自我鉴定
2014/03/25 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
决心书格式范文
2015/09/23 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
2022年显卡天梯图(6月更新)
2022/06/17 数码科技