Saya menggunakan waktu luang saya untuk menulis contoh menjelajahi satu gambar ketika saya belajar JavaScript:
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd html 4.0 transisi // en">
<Html>
<head>
<Title> Galeri Image </iteme>
<Meta name = "generator" content = "editplus">
<Meta name = "penulis" konten = "">
<Meta name = "kata kunci" content = "">
</head>
<bahasa skrip = "javascript">
Function showpic (yang mana) {
var source = manappic.getAttribute ("href"); // Dapatkan nilai atribut HREF dari elemen yang saat ini diklik
var placeholder = document.geteLementById ("placeholder"); // Dapatkan target
placeholder.setAttribute ("src", sumber); // Atur atribut target SRC untuk mengubah gambar
var text = manappic.getAttribute ("title"); // Dapatkan nilai judul atribut elemen yang saat ini diklik
var description = document.geteLementById ("description");
description.firstchild.nodevalue = text; // Tetapkan judul elemen klik ke <p>
// atau description.childnodes [0] .nodevalue = teks;
}
</script>
<body>
<h1> Galeri gambar JavaScript </h1>
<ul>
<li>
<a href = "gambar/fireworks.jpg" onclick = "showpic (ini); return false;"> pic1 </a>
</li>
<li>
<a href = "gambar/coffee.jpg" onclick = "showpic (ini); return false;"> gambar 2 </a>
</li>
<li>
<a href = "gambar/rose.jpg" onclick = "showpic (ini); return false;"> pic tiga </a>
</li>
<li>
<a href = "gambar/bigben.jpg" onclick = "showpic (ini); return false;"> gambar 4 </a>
</li>
</ul>
<img id = "placeholder" src = "gambar /placeholder.gif" />
<p id = "description"> pilih gambar. </p>
</body>
</html>
Melihat:
Kita harus memperhatikan menambahkan acara ke tag <a> </a> untuk menghindari membuatnya melakukan lompatan.
Solusi: Fungsi mengembalikan false; Acara percaya bahwa tautan belum diklik.
Jika nilai href adalah javascript: void (0); Itu juga tidak bisa melompat.