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 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
Javascript 二维数组
Nov 26 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
Angular2安装angular-cli
May 21 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
使用 JavaScript 制作页面效果
Apr 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
PHP4实际应用经验篇(8)
2006/10/09 PHP
php 文章采集正则代码
2009/12/28 PHP
PHP多个版本的分析解释
2011/07/21 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
计算机个人求职信范例
2014/01/24 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书