a href替换src,不跳转页面

需求
1,点击某个链接时,我希望能留在这个页面而不是跳转到另一个页面。
2,点击某个链接是,我希望能在这个网页上同时看到那张图片以及原有得图片清单。
为实现目标的改进
1,通过添加“占位符”图片的办法在这个主页上预留一个浏览区域。
2,拦截跳转,点击不跳转,onclick = "return false"。
3,点击某个链接时,把“占位符”图片替换成那个链接对应的图片。

<head>
    <meta charset="UTF-8">
    <title>javascript图片库</title>
    <link rel="stylesheet" href="layout.css" media="screen"/>
</head>
<body>
  <ul>
       <li>
            <a href="image/01.png" onclick="showPic(this); return false" title ="A fireworks display">Fireworkds</a>
        </li>
        <li>
            <a href="image/02.png" onclick ="showPic(this); return false" title="A cup of black coffee">coffee</a>
        </li>
        <li>
            <a href="image/IMG_5030.JPG" onclick="showPic(this); return false" title="A red red rose">rose</a>
        </li>
    </ul>
    ![](image/IMG_5030.JPG)
    <p id="description">Choose an image.</p>
</body>

为了把“占位符”图片替换成想要查看的图片,需要改变它的src属性,setAttribute是完成这项工作的最佳选择,写一个函数,这个函数只有一个参数,即是一个图片链接,通过改变“占位符”图片的src 属性的办法将其替换成参数图片

 <script>
    //whichpic是要点击的那个a
     function showPic(whichpic){
        //将路径存入变量source
         var source = whichpic.getAttribue("href");
        // 获取占位符,赋值给变量
         var placeholder = document.getElementById('placeholder');
        //setAttribute一个属性名,一个属性值。
         placeholder.setAttribute("src",source);
        //  placeholder.src=source;
     }
 </script>

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 121,921评论 17 134
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 158,444评论 24 688
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 7,277评论 4 39
  • 刚刚又看了一些关于农村那些迷信的事件,不知怎么一直对这种事情,虽然算不上感兴趣,但是却很好奇。因为我是不信这些...
    我是奢侈品阅读 232评论 0 0
  • 不死——致毕业 三年前, 未曾看过, 梧桐树的叶子零零散散的落, 有幸的人会走过一片红毯, 没有新郎新娘, 仅是一...
    摄影师安在阅读 83评论 0 5