js選擇並轉移導航選單範例程式碼_javascript技巧
實作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>
實現選單導航
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() {};
在視窗載入時，呼叫initForm()函數。下一行需要解釋一下，因為它是處理某些瀏覽器的古怪行為的變通方法。
當視窗卸載時（即關閉視窗或瀏覽器轉到另一個網址），我們呼叫一個匿名函數（anonymousfunction），即沒有名稱的函數。在這個範例中，這個函數不但沒有名稱，而且根本不做任何事。提供這個函數是因為必須將onunload設定為某種東西，否則，當點擊瀏覽器的back按鈕時，就不會觸發onload事件，因為在某些瀏覽器（例如Firefox和Safari）中頁面會被緩存。讓onunload執行任何操作，就會使頁面不被緩存，因此當使用者後退時，會發生onload事件。
匿名是指在function和()之間沒有名稱。這是觸發onunload但不讓它做任何事情的最簡單的方法。與任何函數中一樣，花括號包含函數的內容。這裡的花括號是空的，因為這個函數不做任何事。
2.
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
在initForm()函數中，第一行取得HTML頁面上的選單（它的id為newLocation），並且將它的selectedIndex屬性設為零，這會使它顯示Select a topic。
第二行讓腳本在選單選擇改變時，呼叫jumpPage()函數。
3.
var newLoc = document.getElementById("newLocation");
在jumpPage()函數中，newLoc變數會尋找訪客在選單中選擇的值。
4.
var newPage = newLoc.options[newLoc.selectedIndex].value;
從方括號中的程式碼開始，向外依序分析。 newLoc.selectedIndex是一個從0～5的數字（因為有6
個選單選項。記住JavaScript的編號常常是基於零的）。得到這個數字之後，接下來得到對應的選單項目
的值，這就是我們希望跳到的網頁的名稱。然後，將結果賦值給變數newPage。
5.
if (newPage != "") {
window.location = newPage;
這個條件語句首先檢查newPage是否為非空。換句話說，如果newPage有一個值，那麼就讓視窗轉到
選擇的選單項目所指定的URL。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
wallpaper engine能家庭共享嗎
Mar 18, 2024 pm 07:28 PM
請問Wallpaper是否支持家庭共享呢?很遺憾，不能支持哦。儘管如此，我們仍有解決方案。例如，可以用小號購買或先由大號下載好軟體和壁紙，然後再更換到小號。簡單啟動軟體是完全沒問題的。 wallpaperengine能家庭共享嗎答：Wallpaper暫不支援家庭共享功能。 1.據了解，WallpaperEngine似乎不適合家庭共享環境。 2.為了解決這個困擾，建議您考慮購買全新帳號;3、或先在主帳號下載所需軟體和桌布，再切到其他帳號。 4.只要輕觸開啟軟體，便無礙。 5、您可以在上述網頁上查看屬性“
iBatis和MyBatis：哪個比較適合你？
Feb 19, 2024 pm 04:38 PM
iBatis與MyBatis：你該選擇哪一個？簡介：隨著Java語言的快速發展，許多持久化框架也應運而生。 iBatis和MyBatis是兩個備受歡迎的持久化框架，它們都提供了一個簡單而高效的資料存取解決方案。本文將介紹iBatis和MyBatis的特點和優勢，並給出一些具體的程式碼範例，幫助你選擇合適的框架。 iBatis簡介：iBatis是一個開源的持久化框架
wallpaper engine怎麼設定鎖定螢幕桌布？ wallpaper engine使用方法
Mar 13, 2024 pm 08:07 PM
wallpaperengine是常用於設定桌面壁紙的軟體，使用者在wallpaperengine裡可以搜尋自己喜歡的圖片來產生桌面壁紙，也支援將電腦中的圖片加入到wallpaperengine中設定成電腦桌布。下面就來看看wallpaperengine設定鎖定螢幕桌布的方法吧。 wallpaperengine設定鎖定畫面壁紙教學 1、先進入軟體，然後選擇已安裝，點選「設定壁紙選項」。 2、單獨設定選擇完壁紙後需點選右下方的確定。 3、再去點選上方的設定選和預覽。 4、接下來
CS玩家的首選：建議的電腦配置
Jan 02, 2024 pm 04:26 PM
1.處理器在選擇電腦配置時，處理器是至關重要的組件之一。對於玩CS這樣的遊戲來說，處理器的效能直接影響遊戲的流暢度和反應速度。建議選擇IntelCorei5或i7系列的處理器，因為它們具有強大的多核心處理能力和高頻率，可以輕鬆應對CS的高要求。 2.顯示卡顯示卡是遊戲表現的重要因素之一。對於射擊遊戲如CS而言，顯示卡的表現直接影響遊戲畫面的清晰度和流暢度。建議選擇NVIDIAGeForceGTX系列或AMDRadeonRX系列的顯示卡，它們具備出色的圖形處理能力和高幀率輸出，能夠提供更好的遊戲體驗3.內存電
wallpaper engine看片有病毒嗎
Mar 18, 2024 pm 07:28 PM
使用者在使用wallpaperengine可以下載各種壁紙，也可以使用動態壁紙，有很多使用者不知道wallpaperengine看片有沒有病毒，只是影片檔是無法當作病毒的。 wallpaperengine看片有病毒嗎答：不會。 1、只是視訊檔案是無法作為病毒的。 2、只要確保從可信的來源下載視頻，並保持電腦的安全防護措施，就可以避免病毒感染的風險。 3.應用程式類壁紙是apk格式，apk可能會攜帶木馬病毒。 4.WallpaperEngine本身沒有病毒，但是創意工坊裡的一些應用程式類壁紙可能有病毒。
wallpaper engine的壁紙在哪個文件夾
Mar 19, 2024 am 08:16 AM
使用者在使用wallpaper時可以下載各種自己喜歡的桌布來使用，有許多使用者不知道wallpaper的桌佈在哪個資料夾，使用者下載的桌布存放在content資料夾裡。 wallpaper的壁紙在哪個文件夾答：content文件夾。 1、開啟檔案總管。 2、點選左側「此電腦」。 3、找到“STEAM”資料夾。 4、選擇“steamapps”。 5、點選“workshop”。 6.找尋「content」資料夾。
Microsoft Edge瀏覽器怎麼更改字體大小-Microsoft Edge瀏覽器更改字體大小的方法
Mar 04, 2024 pm 05:58 PM
想必大家對MicrosoftEdge瀏覽器並不模式，不過你們知道MicrosoftEdge瀏覽器怎麼更改字體大小嗎?下面這篇文章就講述了MicrosoftEdge瀏覽器更改字體大小的方法，讓我們一起去下文好好學習學習吧。首先,找到MicrosoftEdge瀏覽器雙擊開啟。可在桌面快速鍵、開始功能表或工作列找到MicrosoftEdge瀏覽器，並雙擊開啟。其次，開啟【設定】介面開啟進入這個瀏覽器介面，點選左上角【...】標識;雙擊【設定】，開啟進入設定介面。再次，找到並開啟【外觀】介面滑鼠滾動下
wallpaper engine耗電多嗎
Mar 18, 2024 pm 08:30 PM
使用者在使用wallpaperengine時可以更改自己的電腦桌布，有很多使用者不知道wallpaperengine耗電多嗎，動態桌布是會比靜態壁紙更耗電一點，但耗得不是很多。 wallpaperengine耗電多嗎答：不多。 1.動態壁紙是會比靜態壁紙更耗電一點，但耗得不是很多。 2.開啟動態桌布會增加電腦耗電量，並帶走一小小部分記憶體佔用。 3.用戶不需要擔心動態壁紙消耗電比較嚴重的。
