javascript教程系列36:DOM-点击按钮切换图片案例

邢晋宇

于 2018-06-01 22:54:29 发布

阅读量686

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_36017081/article/details/80398696

版权

JavaScript 专栏收录该内容

50 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>


<a href="http://www.baidu.com" id="link">点击切换</a>
<br>

<img id="img" src="images/a.jpg" alt="图片" width="500" height="350">

</body>
</html>
<script>
  //需求: 点击a,改变图片
  //  点击a元素,修改img的src
    1. 获取元素
  var link = document.getElementById('link');
  var img = document.getElementById('img');
  var flag = true; //用于标记当前展示的是那张图
  // 2. 给a注册点击事件
      link.onclick = function(){
        //    3. 在事件处理函数中修改img的src属性的值
        //4. 当点击a的时候,先判断flag的值,如果是true,就修改成b.jpg.否则就是a.jpg
        if(flag){
          //从a到b
          img.src = 'images/b.jpg';
          flag = false;
        }else{
          //从b到a
          img.src = 'images/a.jpg';
          flag = true;
        }
        return false; //阻止a的默认行为
      }
  
</script>