cari

Rumah  >  Artikel  >  hujung hadapan web  >  js pilih dan pindahkan contoh kemahiran code_javascript menu navigasi

js pilih dan pindahkan contoh kemahiran code_javascript menu navigasi

WBOY
WBOYasal
2016-05-16 16:39:191185semak imbas

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>

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

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.

2.

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.

3.

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

4.

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.

5.

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.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penyelesaian kepada pengecualian kegagalan apabila menggunakan Ajax untuk menetapkan nilai kepada pembolehubah global dalam JQuery_jqueryArtikel seterusnya：Penyelesaian kepada pengecualian kegagalan apabila menggunakan Ajax untuk menetapkan nilai kepada pembolehubah global dalam JQuery_jquery

Artikel berkaitan

Lihat lagi