1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <!--<a href="javacript:;">切换</a>--> 10 <!--<a href="#">切换</a>--> 11 <a href="http://www.baidu.com" style="margin:10px;display: block" onclick="fn();return false;">切换</a> 12 <img id="img" src="image/1.jpg" width="400px"/> 13 14 <script> 15 //需求：点击a链接，img图片切换（行内式） 16 //步骤： 17 //1.获取事件源和图片 18 //2.绑定事件 19 //3.书写事件驱动程序 20 21 //1.获取事件源和图片 22 // var a = document.getElementsByTagName("a")[0]; 23 // var img = document.getElementById("img"); 24 // //2.绑定事件 25 // a.onclick = function () { 26 // //3.书写事件驱动程序 27 // img.src = "image/2.jpg"; 28 // //return false的目的是禁止a连接跳转； 29 // return false; 30 // } 31 var img = document.getElementById("img"); 32 function fn(){ 33 img.src = "image/2.jpg"; 34 } 35 36 37 </script> 38 39 40 </body> 41 </html>