初学JavaScript，在《JavaScript DOM编程艺术》书中有个实例代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<header>
<img src="images/logo.gif" alt="Jay Skript and the Domsters" />
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>Photos of the band</h1>
<ul id="imagegallery">
<li>
<a href="images/photos/concert.jpg" title="The crowd goes wils">
<img src="images/photos/thumbnail_concert.jpg" alt="the band in concert" />
</a>
</li>
<li>
<a href="images/photos/bassist.jpg" title="An atmospheric moment">
<img src="images/photos/thumbnail_bassist.jpg" alt="the bassist" />
</a>
</li>
<li>
<a href="images/photos/guitarist.jpg" title="Rocking out">
<img src="images/photos/thumbnail_guitarist.jpg" alt="the guitarist" />
</a>
</li>
<li>
<a href="images/photos/crowd.jpg" title="Encore! Encore! ">
<img src="images/photos/thumbnail_crowd.jpg" alt="the audience" />
</a>
</li>
</ul>
</article>
<script>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
function showPic(pic) {
if (!document.getElementById("placeholder")) return false;
var source = pic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
if (placeholder.nodeName !="IMG") return false;
placeholder.setAttribute("src",source);
if (document.getElementById("description")) {
var text = pic.getAttribute("title") ? pic.getAttribute("title") : "";
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
}
return true;
}
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
links[i].onclick = function() {
return !showPic(this);
}
}
}
addLoadEvent(prepareGallery);
function preparePlaceholder() {
var placeholder = document.createElement("img");
placeholder.setAttribute("id", "placeholder");
placeholder.setAttribute("src", "image06/placeholder.gif");
placeholder.setAttribute("alt", "my image gallery");
var description = document.createElement("p");
description.setAttribute("id", "description");
var desctext = document.createTextNode("Choose an image.");
description.appendChild(desctext);
var gallery = document.getElementById("imagegallery");
insertAfter(placeholder, gallery);
insertAfter(description, placeholder);
}
addLoadEvent(preparePlaceholder);
</script>
</body>
</html>
单击缩略图，图片会在本页显示（不会跳转到另一页显示）；
如果把showPic(pic)函数改写成如下：
function showPic(pic) {
if (!document.getElementById("placeholder")) return false;
var source = pic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);
if (!document.getElementById("description")) return false;
if (pic.getAttribute("title")) {
var text = pic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}
单击图片缩略图，图片就会跳转到新的页面显示；实在找不出原因，请各位老师指教，非常感谢！
分享
Go 旅城通票 2016-03-31 02:24关注
