关于页面跳转的问题

初学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>

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;

}
单击图片缩略图，图片就会跳转到新的页面显示；实在找不出原因，请各位老师指教，非常感谢！

我觉得用js实现你上面的效果有点麻烦，可以不用js就可以实现图片在本页显示还是跳转新页面显示，我写了代码可以参考:

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8">
    <title>图片跳转问题</title>
    <style>
        body {
            text-align: center;
        }
        img {
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <p>
        <h3>点击下面图片，实现图片本页显示</h3>
        <a target="_blank" href="images/banshu.jpg">
            <img src="images/banshu.jpg"/>
        </a>
    </p>
    <p>
        <h3>点击图片，在新的页面显示</h3>
         <a href="images/banshu.jpg">
            <img src="images/banshu.jpg" />
        </a>
    </p>
</body>

</html>

【热门文章】