问题描述
- 关于图片页面跳转的问题
-
初学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; } 单击图片缩略图，图片就会跳转到新的页面显示；实在找不出原因，请各位老师指教，非常感谢！
解决方案
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
///return false;
return true;///最后要return true，这样links[i].onclick = function() { return !showPic(this); } 连接点击后取反就是false，return false才是阻止连接跳转
时间： 2024-08-17 21:54:23