Maison > Article > interface Web > js sélectionne et transfère le menu de navigation, exemples de compétences code_javascript

js sélectionne et transfère le menu de navigation, exemples de compétences code_javascript

WBOYoriginal: 2016-05-16 16:39:191146parcourir

Implémenter l'interface 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>

Navigation dans le menu d'implémentation

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

Ce qui suit est l'analyse du code source
1.

window.onload = initForm;
window.onunload = function() {};
Lorsque la fenêtre se charge, la fonction initForm() est appelée. La ligne suivante nécessite quelques explications, car il s'agit d'une solution de contournement pour gérer le comportement étrange de certains navigateurs.

Lorsque la fenêtre est déchargée (c'est-à-dire que la fenêtre est fermée ou que le navigateur accède à une autre URL), nous appelons une fonction anonyme, c'est-à-dire une fonction sans nom. Dans cet exemple, non seulement la fonction n’a pas de nom, mais elle ne fait rien du tout. Cette fonction est fournie car onunload doit être défini sur quelque chose, sinon, lorsque vous cliquez sur le bouton Précédent du navigateur, l'événement onload ne sera pas déclenché car la page sera mise en cache dans certains navigateurs (tels que Firefox et Safari). Laisser onunload faire quoi que ce soit empêchera la page d'être mise en cache, donc lorsque l'utilisateur reculera, l'événement onload se produira.

Anonyme signifie qu'il n'y a pas de nom entre la fonction et (). C'est le moyen le plus simple de déclencher onunload sans le laisser faire quoi que ce soit. Comme dans toute fonction, les accolades contiennent le contenu de la fonction. Les accolades ici sont vides car cette fonction ne fait rien.

document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
Dans la fonction initForm(), la première ligne récupère le menu de la page HTML (son identifiant est newLocation) et définit sa propriété selectedIndex à zéro, ce qui lui fait afficher Select a topic.
La deuxième ligne indique au script d'appeler la fonction jumpPage() lorsque la sélection du menu change.

var newLoc = document.getElementById("newLocation");
Dans la fonction jumpPage(), la variable newLoc recherche la valeur sélectionnée par le visiteur dans le menu.

var newPage = newLoc.options[newLoc.selectedIndex].value;
Commencez par le code entre crochets et progressez vers l’extérieur. newLoc.selectedIndex est un nombre de 0 à 5 (car il y en a 6
options de menu. N'oubliez pas que la numérotation JavaScript est souvent basée sur zéro). Après avoir obtenu ce numéro, obtenez ensuite l'élément de menu correspondant
La valeur de , c'est le nom de la page Web à laquelle nous voulons accéder. Ensuite, affectez le résultat à la variable newPage.

if (newPage != "") {
window.location = newPage;
Cette instruction conditionnelle vérifie d'abord si newPage n'est pas vide. En d'autres termes, si newPage a une valeur, laissez la fenêtre aller sur
L'URL spécifiée par l'élément de menu sélectionné.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Solution à l'exception d'échec lors de l'utilisation d'Ajax pour attribuer des valeurs aux variables globales dans JQuery_jqueryArticle suivant：Solution à l'exception d'échec lors de l'utilisation d'Ajax pour attribuer des valeurs aux variables globales dans JQuery_jquery

Articles Liés

Voir plus