J'ai utilisé mon temps libre pour écrire un exemple de navigation sur une seule image lorsque j'apprenais JavaScript:
La copie de code est la suivante:
<! Doctype html public "- // w3c // dtd html 4.0 transitional // en">
<html>
<adal>
<Title> Galerie d'images </TITME>
<Meta name = "générateur" contenu = "editplus">
<Meta name = "auteur" content = "">
<Meta name = "keywords" contenu = "">
</ Head>
<script linguisse = "javascript">
fonction showpic (quipic) {
var source = whatpic.getAttribute ("href"); // Obtenez la valeur de l'attribut href de l'élément actuellement cliqué
var placeholder = document.getElementById ("placeholder"); // Obtenez la cible
placeholder.setAttribute ("src", source); // Définissez l'attribut cible SRC pour modifier l'image
var text = whatpic.getAttribute ("Title"); // Obtenez la valeur du titre d'attribut de l'élément actuellement cliqué
var description = document.getElementById ("Description");
description.firstchild.nodevalue = text; // attribue le titre de l'élément de clic à <p>
// ou description.childNodes [0] .Nodevalue = text;
}
</cript>
<body>
<h1> galerie d'images JavaScript </h1>
<ul>
<li>
<a href = "images / feux de feu.jpg" onclick = "showpic (this); return false;"> pic1 </a>
</li>
<li>
<a href = "images / café.jpg" onclick = "showpic (this); return false;"> image 2 </a>
</li>
<li>
<a href = "images / rose.jpg" onclick = "showpic (this); return false;"> pic trois </a>
</li>
<li>
<a href = "images / bigben.jpg" onclick = "showpic (this); return false;"> image 4 </a>
</li>
</ul>
<img id = "placeholder" src = "images / placeholder.gif" />
<p id = "Description"> Sélectionnez l'image. </p>
</docy>
</html>
Avis:
Nous devons prêter attention à l'ajout d'événements à l'étiquette <a> </a> pour éviter de le faire effectuer des sauts.
Solution: la fonction renvoie false; L'événement estime que le lien n'a pas été cliqué.
Si la valeur de HREF est javascript: void (0); Il ne peut pas non plus sauter.