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>

a href替换src,不跳转页面

推荐阅读更多精彩内容