要求是点击a链接,实现图片的变换。
那么方法是在点击(onclick)a链接时,通过一个方法实现图片变换
原代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>just a practice</title>
</head>
<body>
<a href="#" onclick="fn()" style="display:block;">点击切换图片</a>
<img src="cup.jpg" id="box" alt=""/>
<script>
function fn(){
var a=document.getElementById("box");
a.setAttribute("src","oil.png");
}
</script>
</body>
</html>
ok的 可以实现 打开浏览器是这样子:
点击文字,显示为:
氮素!
如果,我把原代码中img的href属性改为:http://www.baidu.com
结果,当我点击文字时,图片也会变换,但最终都是跳转到百度去了,那么,如何让href属性不生效呢?那就是在onclick属性中添加return false;
代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>just a practice</title>
</head>
<body>
<a href="http://www.baidu.com" onclick="fn();return false;" style="display:block;">点击切换图片</a>
<img src="cup.jpg" id="box" alt=""/>
<script>
function fn(){
var a=document.getElementById("box");
a.setAttribute("src","oil.png");
}
</script>
</body>
</html>
就好了。
如果将return false放到fn()函数里面,也是不生效的。原因……不知道诶……
还有另外一种代码,是视频里老师用的:
<body>
<a href="http://www.baidu.com" style="display:block;">点击切换图片</a>
<img src="cup.jpg" id="box" alt=""/>
<script>
var a=document.getElementsByTagName("a")[0];
var box=document.getElementById("box");
a.onclick=function(){
box.src="oil.png";
return false;
}
</script>
</body>
效果是一样一样的~~~