关于DOM 0级事件处理程序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div>
<ul>
<li><a href="imaget/1.jpg" title="图片1">图片1</a></li>
<li><a href="imaget/2.jpg" title="图片2">图片2</a></li>
<li><a href="imaget/3.jpg" title="图片3">图片3</a></li>
<li><a href="imaget/4.jpg" title="图片4">图片4</a></li>
</ul>
</div>
<div>
<img src="imaget/6.jpg" id="zhanweifu" />
</div>
<div>
<p id="ppp">这里替换</p>
</div>
<script type="text/javascript" src="spr.js"></script>
</body>
</html>
以上的HTML部分,JS如下;
function src(){
var a=document.getElementsByTagName('a');
for(var i=0;i<a.length;i++){
a[i].onclick=function(x){
var zhanweifu=document.getElementById("zhanweifu");
var a=x.getAttribute("href"); //获取被点击的this的链接地址
zhanweifu.setAttribute("src",a); //把占位符的src地址改为a
var ppp=document.getElementById("ppp").innerHTML=a;
}
}
}
window.onload=src;
头疼，如何取消a标签的默认跳转行为呢？我试过将return false放在函数内都不行.
朝花bu夕拾1回答
-
OlderSkee
<div> <ul> <li><a href="javascript:void(0)" alt="images/01.jpg" title="图片1">图片1</a></li> <li><a href="javascript:void(0)" alt="images/02.jpg" title="图片2">图片2</a></li> <li><a href="javascript:void(0)" alt="images/03.jpg" title="图片3">图片3</a></li> <li><a href="javascript:void(0)" alt="images/04.jpg" title="图片4">图片4</a></li> </ul></div>//javascript:void(0) 就是取消默认跳转function src(){ var a=document.getElementsByTagName('a'); for(var i=0;i<a.length;i++){ a[i].onclick=function(){ var zhanweifu=document.getElementById("zhanweifu"); //这里你需要用this.而不是x来控制获取的。 x 是指的事件，在这里是指onclick这个事件，//this指向的才是事件源。 //另外，你需要重新用alt属性来获得连接 。 var a=this.getAttribute("alt"); //获取被点击的this的链接地址 zhanweifu.setAttribute("src",a); //把占位符的src地址改为a var ppp=document.getElementById("ppp") ppp.innerHTML =a; } }}
随时随地看视频慕课网APP
相关分类
JavaScript