编程 Javascript

javascript实现跳转菜单的具体方法

Posted in Javascript onJuly 05, 2013

传统

这里要做的是，省略Go There按钮，选择菜单项后，直接跳转。

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 相关文章推荐

jquery json 实例代码

Dec 02 Javascript

从数据结构的角度分析 for each in 比 for in 快的多

Jul 07 Javascript

js获取当前月的第一天和最后一天的小例子

Nov 18 Javascript

js打开新窗口方法整理

Feb 17 Javascript

详解vue 模版组件的三种用法

Jul 21 Javascript

jQuery选择器之属性过滤选择器详解

Sep 28 jQuery

JavaScript多态与封装实例分析

Jul 27 Javascript

Angular设置别名alias的方法

Nov 08 Javascript

vueScroll实现移动端下拉刷新、上拉加载

Mar 22 Javascript

angular 服务随记小结

May 06 Javascript

layui layer select 选择被遮挡的解决方法

Sep 21 Javascript

如何利用JS将手机号中间四位变成*号

Sep 29 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