首頁(yè) 猿問(wèn) setAttribute問(wèn)題，為什...

setAttribute問(wèn)題，為什么點(diǎn)擊鏈接不能在占位符的位置顯示圖片，而是轉(zhuǎn)到另一個(gè)窗口？？？

JavaScript

lzy瑜 2016-08-31 21:04:22

<title>無(wú)標(biāo)題文檔</title><script type="text/javascript">function shopPic(whichpic){var placeholder=document.getElementById("placeholder");placeholder.setAttribute("src",whichpic.getAttribute("href"));}</script></head><body><h1>Snapshot</h1><ul><li><a href="image/1.jpg" title="1">1</a></li><li><a href="image/2.jpg" title="2">2</a></li><li><a href="image/3.jpg" title="3">3</a></li><li><a href="image/4.jpg" title="4">4</a></li></ul><img id="placeholder" src="image/3.jpg" alt="占位符" /></ul></body></html>

查看完整描述

2 回答

Ewall_

TA貢獻(xiàn)27條經(jīng)驗(yàn) 獲得超9個(gè)贊

你事件onclick都沒有，哪里來(lái)的圖片轉(zhuǎn)換

<body>
	<h1>Snapshot</h1>
	<ul?id="picgroup">
		<li><a?href="image/1.jpg"?title="1">1</a></li>
		<li><a?href="image/2.jpg"?title="2">2</a></li>
		<li><a?href="image/3.jpg"?title="3">3</a></li>
		<li><a?href="image/4.jpg"?title="4">4</a></li>
	</ul>
	<img?id="placeholder"?src="image/3.jpg"?alt="占位符"?/>
<script?type="text/javascript">
	function?picgroup(){
		var?picgroup=document.getElementById("picgroup");
		var?aLinks=picgroup.getElementsByTagName("a");
		for(i=0;i<aLinks.length;i++){
			aLinks.onclick=function(){
				showPic(this);
				return?flase;
			}
		}
	}
	function?showPic(whichpic){
		var?placeholder=document.getElementById("placeholder");
		placeholder.setAttribute("src",whichpic.getAttribute("href"));
	}
</script>
</body>

反對(duì) 回復(fù) 2016-08-31

_瀟瀟暮雨

TA貢獻(xiàn)646條經(jīng)驗(yàn) 獲得超225個(gè)贊

需要阻止默認(rèn)事件，下面是代碼：

<html>
<title>無(wú)標(biāo)題文檔</title>
<script?type="text/javascript">
function?shopPic(whichpic){
?event.preventDefault()
var?placeholder=document.getElementById("placeholder");
console.log(whichpic.getAttribute("href"))
placeholder.setAttribute("src",whichpic.getAttribute("href"));
}
</script>
</head>


<body>
<h1>Snapshot</h1>
<ul>
<li><a?href="image/1.jpg"?title="1"?onclick="shopPic(this)">1</a></li>
<li><a?href="image/2.jpg"?title="2"?onclick="shopPic(this)">2</a></li>
<li><a?href="image/3.jpg"?title="3"?onclick="shopPic(this)">3</a></li>
<li><a?href="image/4.jpg"?title="4"?onclick="shopPic(this)">4</a></li>
</ul>
<img?id="placeholder"?src="image/3.jpg"?alt="占位符"?/>
</ul>
</body>
</html>

反對(duì) 回復(fù) 2016-08-31