2 xidaojia xidaojia 于 2016.03.31 09:47 提问

关于图片页面跳转的问题
 初学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;

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



1个回答

showbo
showbo   Ds   Rxr 2016.03.31 10:24
已采纳
 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才是阻止连接跳转
xidaojia
xidaojia 谢谢老师的指点,非常感谢!
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!