照着《JavaScript DOM编程艺术》第六章 做个图片库,在点击链接的时候要留在本窗口不新开一个窗口,而我做出来的每次点击图片列表都会打开新窗口,而且占位符图片的文本也没有替换为所点击的图片的title属性值,请问哪里出了问题?
Choose an image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="layout.css">
<script type="text/javascript">
window.onload=function prepareGallery(){
var gallery=document.getElementById('imagegallery');
var links=gallery.getElementByTagName('a');
var i = 0;
for(i = 0;i<links.length;i++){
links[i].onclick=function(){
return showPic(this)?false:true;
};
};
};
function showPic(whichpic){
var source=whichpic.getAttribute('href');
var placeholder=document.getElementById('placeholder');
placeholder.setAttribute('src',source);
var text=whichpic.getAttribute('title')?whichpic.getAttribute:"";
var description=document.getElementById('description');
description.firstChild.nodeValue = text;
return true;
};
</script>
</head>
<body>
<h1>图片替换</h1>
<ul id='imagegallery'>
<li>
<a href="http://g.hiphotos.baidu.com/zhidao/pic/item/9f510fb30f2442a79fbc68ded343ad4bd113021e.jpg" title="A Fire man">Fire</a>
</li>
<li>
<a href="http://attach.bbs.miui.com/forum/201402/21/120043wsfuzzuefyasz3fe.jpg" title="A cup of coffee" >Coffee</a>
</li>
<li>
<a href="http://h.hiphotos.baidu.com/zhidao/pic/item/6a63f6246b600c3320b14bb3184c510fd8f9a185.jpg" title="A red rose" >Rose</a>
</li>
<li>
<a href="http://pic2.nipic.com/20090506/1055421_080356081_2.jpg" title="A strong man" >Strong</a>
</li>
</ul>
<img src="http://imgsrc.baidu.com/forum/pic/item/9f510fb30f2442a72c033b31d143ad4bd1130211.jpg" id="placeholder" alt="my image">
<p id="description">Choose an image.</p>
</body>
</html>
<a href target title />
这里面有个target属性,target="_self"表示当前页面打开, _blank表示新页面打开,你把target属性设置一下
还是新窗口打开。
还有我是希望通过javascript代码实现这个效果。
之前把onclick="showPic(this);return false;"当作一个属性插入到<a>标签中可以实现在本窗口打开。
现在是把onclick事件写入JavaScript中并通过判断返回值true||false来决定是否取消<a>的默认行为,然而并没有用。
function tt(){
return false;
}
<a href="http://pic2.nipic.com/20090506/1055421_080356081_2.jpg" onclick="tt();" title="A strong man">Strong</a>
<a href="http://pic2.nipic.com/20090506/1055421_080356081_2.jpg" onclick="return tt();" title="A strong man">Strong</a>
你研究下这两个的区别,和你的onclick的关系。
很简单的,这是javascript基础,阻止默认事件就好了
e是当前事件的事件源
e.preventDefault();
另外给你一个地址,你也可以自己封装一个
http://www.cnblogs.com/goesby/p/4192018.html
阻止a的默认行为:<a href="https://www.hao123.com" onClick="return false;">链接</a>
点击a后不会有任何变化