javascript實(shí)現(xiàn)跳轉(zhuǎn)菜單的具體方法

更新時(shí)間：2013年07月05日 17:14:29 作者：

這篇文章介紹了javascript實(shí)現(xiàn)跳轉(zhuǎn)菜單的具體方法，有需要的朋友可以參考一下

傳統(tǒng)

這里要做的是，省略Go There按鈕，選擇菜單項(xiàng)后，直接跳轉(zhuǎn)。

Html代碼

復(fù)制代碼代碼如下:

<!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>轉(zhuǎn)移菜單</title>  
<script type="text/javascript" src="轉(zhuǎn)移菜單.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>  
  <!--當(dāng)瀏覽器不支持javascript或者禁用腳本運(yùn)行時(shí)被調(diào)用-->  
 <noscript>  
    <input type="submit" value="Go There!"/>  
 </noscript>  
</form>  
</body>  
</html>  

Javascript腳本

復(fù)制代碼代碼如下:

window.onload=initForm;  
//防止頁面緩存，無法觸發(fā)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;  
            }  
        }  