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 相关文章推荐
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
关于Js中new操作符的作用详解
Feb 21 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
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
PHP 编写大型网站问题集
2010/05/07 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
Python3实现购物车功能
2018/04/18 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
安全宣传标语口号
2014/06/06 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
北京爱情故事观后感
2015/06/12 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python