dom_8 图片切换

作者: basicGeek | 来源:发表于2018-11-22 15:59 被阅读0次

<!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