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

  传统

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;

  }

  }