dom_8 图片切换
2018-11-22 本文已影响0人
basicGeek
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<a href="javacript:;">切换</a>-->
<!--<a href="#">切换</a>-->
<a href="http://www.baidu.com" style="margin:10px;display: block" onclick="fn();return false;">切换</a>
<img id="img" src="image/1.jpg" width="400px"/>
<script>
//需求：点击a链接，img图片切换（行内式）
//步骤：
//1.获取事件源和图片
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和图片
// var a = document.getElementsByTagName("a")[0];
// var img = document.getElementById("img");
// //2.绑定事件
// a.onclick = function () {
// //3.书写事件驱动程序
// img.src = "image/2.jpg";
// //return false的目的是禁止a连接跳转；
// return false;
// }
var img = document.getElementById("img");
function fn(){
img.src = "image/2.jpg";
}
</script>
</body>
</html>
change pic
