js pilih dan pindahkan contoh kemahiran code_javascript menu navigasi-tutorial js-php.cn

js pilih dan pindahkan contoh kemahiran code_javascript menu navigasi

WBOY

Lepaskan： 2016-05-16 16:39:19

asal

1144 orang telah melayarinya

Laksanakan antara muka 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>

Salin selepas log masuk

Laksanakan navigasi menu

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;
}
}

Salin selepas log masuk

Berikut ialah analisis kod sumber
1.

window.onload = initForm;
window.onunload = function() {};
Apabila tetingkap dimuatkan, fungsi initForm() dipanggil. Baris seterusnya memerlukan beberapa penjelasan, kerana ia adalah penyelesaian untuk menangani tingkah laku pelik sesetengah pelayar.

Apabila tetingkap dipunggah (iaitu, tetingkap ditutup atau penyemak imbas pergi ke URL lain), kami memanggil fungsi tanpa nama, iaitu fungsi tanpa nama. Dalam contoh ini, fungsi itu bukan sahaja tidak mempunyai nama, tetapi ia juga tidak melakukan apa-apa sama sekali. Fungsi ini disediakan kerana onunload mesti ditetapkan kepada sesuatu, jika tidak, apabila butang belakang penyemak imbas diklik, acara onload tidak akan dicetuskan kerana halaman tersebut akan dicache dalam beberapa penyemak imbas (seperti Firefox dan Safari) . Membiarkan onunload melakukan apa sahaja akan menyebabkan halaman tidak dicache, jadi apabila pengguna berundur, acara onload akan berlaku.

Tanpa Nama bermaksud tiada nama antara fungsi dan (). Ini adalah cara paling mudah untuk mencetuskan beban tetapi jangan biarkan ia melakukan apa-apa. Seperti dalam mana-mana fungsi, pendakap kerinting mengandungi kandungan fungsi tersebut. Kurung keriting di sini kosong kerana fungsi ini tidak melakukan apa-apa.

document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
Dalam fungsi initForm(), baris pertama mendapat menu pada halaman HTML (idnya ialah newLocation) dan menetapkan sifat SelectIndexnya kepada sifar, yang menyebabkan ia memaparkan Pilih topik.
Baris kedua memberitahu skrip untuk memanggil fungsi jumpPage() apabila pilihan menu berubah.

var newLoc = document.getElementById("newLocation");
Dalam fungsi jumpPage(), pembolehubah newLoc mencari nilai yang dipilih oleh pelawat dalam menu.

var newPage = newLoc.options[newLoc.selectedIndex].value;
Mulakan dengan kod dalam kurungan segi empat sama dan lakukan cara anda ke luar. newLoc.selectedIndex ialah nombor dari 0 hingga 5 (kerana terdapat 6
pilihan menu. Ingat bahawa penomboran JavaScript selalunya berasaskan sifar). Selepas mendapat nombor ini, seterusnya dapatkan item menu yang sepadan
Nilai , ini adalah nama halaman web yang ingin kita lompat. Kemudian, tetapkan hasilnya kepada newPage yang berubah-ubah.

jika (Halaman baharu != "") {
window.location = newPage;
Kenyataan bersyarat ini mula-mula menyemak sama ada newPage tidak kosong. Dalam erti kata lain, jika newPage mempunyai nilai, biarkan tetingkap pergi ke
URL yang ditentukan oleh item menu yang dipilih.