js選擇并轉(zhuǎn)移導(dǎo)航菜單示例代碼

更新時間：2014年08月19日 11:15:54 投稿：whsnow

選擇并轉(zhuǎn)移導(dǎo)航菜單的方法有很多，本例使用js來實現(xiàn)選擇并轉(zhuǎn)移導(dǎo)航菜單,需要的朋友可以參考下

實現(xiàn)html界面

<!DOCTYPE html>
<html>
<head>
<title>Select and Go Navigation</title>
<script src="script01.js"></script>
<link rel="stylesheet" href="script01.css" rel="external nofollow" >
</head>
<body>
<form action="gotoLocation.cgi" class="centered">
<select id="newLocation">
<option selected>Select a topic</option>
<option value="script06.html">Cross-checking fields</option>
<option value="script07.html">Working with radio buttons</option>
<option value="script08.html">Setting one field with another</option>
<option value="script09.html">Validating Zip codes</option>
<option value="script10.html">Validating email addresses</option>
</select>
<noscript>
<input type="submit" value="Go There!">
</noscript>
</form>
</body>
</html>

實現(xiàn)菜單導(dǎo)航

window.onload = initForm;
window.onunload = function() {};
function initForm() {
document.getElementById("newLocation").selectedIndex = 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;
}
}

下面是源碼分析
1.

window.onload = initForm;
window.onunload = function() {};
在窗口加載時，調(diào)用initForm()函數(shù)。下一行需要解釋一下，因為它是處理某些瀏覽器的古怪行為的變通方法。

當(dāng)窗口卸載時（即關(guān)閉窗口或者瀏覽器轉(zhuǎn)到另一個網(wǎng)址），我們調(diào)用一個匿名函數(shù)（anonymousfunction），即沒有名稱的函數(shù)。在這個示例中，這個函數(shù)不但沒有名稱，而且根本不做任何事情。提供這個函數(shù)是因為必須將onunload設(shè)置為某種東西，否則，當(dāng)單擊瀏覽器的back按鈕時，就不會觸發(fā)onload事件，因為在某些瀏覽器（比如Firefox和Safari）中頁面會被緩存。讓onunload執(zhí)行任何操作，就會使頁面不被緩存，因此當(dāng)用戶后退時，會發(fā)生onload事件。

匿名是指在function和()之間沒有名稱。這是觸發(fā)onunload但不讓它做任何事情的最簡單的方法。與任何函數(shù)中一樣，花括號包含函數(shù)的內(nèi)容。這里的花括號是空的，因為這個函數(shù)不做任何事情。

document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
在initForm()函數(shù)中，第一行獲得HTML頁面上的菜單（它的id為newLocation），并且將它的selectedIndex屬性設(shè)置為零，這會使它顯示Select a topic。
第二行讓腳本在菜單選擇發(fā)生改變時，調(diào)用jumpPage()函數(shù)。

var newLoc = document.getElementById("newLocation");
在jumpPage()函數(shù)中，newLoc變量查找訪問者在菜單中選擇的值。

var newPage = newLoc.options[newLoc.selectedIndex].value;
從方括號中的代碼開始，向外依次分析。newLoc.selectedIndex是一個從0～5的數(shù)字（因為有6
個菜單選項。記住JavaScript的編號常常是基于零的）。得到這個數(shù)字之后，接下來獲得對應(yīng)的菜單項
的值，這就是我們希望跳轉(zhuǎn)到的網(wǎng)頁的名稱。然后，將結(jié)果賦值給變量newPage。

if (newPage != "") {
window.location = newPage;
這個條件語句首先檢查newPage是否非空。換句話說，如果newPage有一個值，那么讓窗口轉(zhuǎn)到
選擇的菜單項所指定的URL。

您可能感興趣的文章: