关于图片页面跳转的问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

关于图片页面跳转的问题

2016-06-02 10:00:50 1880 1
初学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)
  • 云栖技术
    2019-07-17 19:24:04
     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才是阻止连接跳转

    0 0
相关问答

1

回答

关于域名的问题

2020-05-23 21:06:42 163浏览量 回答数 1

1

回答

关于域名的问题

2019-03-11 15:22:35 271浏览量 回答数 1

2

回答

关于域名备案的问题

2019-03-05 14:19:57 389浏览量 回答数 2

2

回答

关于域名的问题

2018-02-05 19:57:15 1614浏览量 回答数 2

2

回答

关于网页内上传图片的问题求助!

2017-06-18 23:13:36 2359浏览量 回答数 2

4

回答

新人关于域名和备案的问题

2016-06-20 11:32:02 4690浏览量 回答数 4

1

回答

关于安卓下载图片和下载文件的问题

2016-03-12 11:30:56 1506浏览量 回答数 1

1

回答

关于Android 实现图片轮播点击跳转页面

2016-03-12 10:42:23 2313浏览量 回答数 1

3

回答

关于备案中子域名的问题

2015-03-30 13:38:37 4211浏览量 回答数 3

7

回答

KF来,关于域名限制的问题

2011-08-13 09:32:11 8799浏览量 回答数 7
+关注
云栖技术
社区爱好者,专为云栖社区服务!
34
文章
897
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载