javascript实现跳转菜单的具体方法
更新时间：2013年07月05日 17:14:29 作者：
这篇文章介绍了javascript实现跳转菜单的具体方法，有需要的朋友可以参考一下
传统
这里要做的是，省略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中的find()方法和返回数据的内存指向,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了ES6 数组some()和every()的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
由浅到深了解JavaScript类...2007-01-01
本篇文章给大家介绍基于CSS javascript 结合实现悬浮固定菜单效果，附有源码下载，需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JavaScript 详解预编译原理的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要为大家介绍了JavaScript Promise，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要给大家分享了js中toString方法的3个作用，文章围绕js中toString方法的相关资料展开全文内容，需要的小伙伴可以参考一下，希望对你的学习有所帮助2021-12-12
全局数据共享 全局数据共享(状态管理)是为了解决组件之间数据共享的问题，开发中常用的全局数据共享方案有：Vuex、Redux、MobX等，这篇文章主要介绍了微信小程序中如何使用store数据共享,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了JS仿百度自动下拉框模糊匹配提示 的相关资料,需要的朋友可以参考下2016-07-07
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
这篇文章主要介绍了微信小程序出现wx.navigateTo页面不跳转问题的解决方法,简单分析了微信小程序出现wx.navigateTo页面不跳转情况的原因及相应的解决方法,需要的朋友可以参考下2017-12-12
最新评论