首页 > 代码库 > 【前端积累】点击链接切换图片显示
【前端积累】点击链接切换图片显示
1 <!DOCTYPE html> 2 <html><!--树根--> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <title>Image Gallery</title> 8 <meta name="description" content="An interactive getting started guide for Brackets."> 9 <script type="text/javascript" src="showpic.js"></script>10 </head>11 <body>12 <h1>Snapshots</h1>13 <ul>14 <li>15 <a href="image/fudan.jpg" title="fudan university" onclick="showPic(this); return false;">fudan</a>16 </li>17 <li>18 <a href="image/sunflower.jpg" title="sunflower" onclick="showPic(this);return false;">sunflower</a>19 </li>20 <li> <a href="image/waitan.jpg" title="waitan" onclick="showPic(this);return false;">waitan</a>21 </li>22 <li>23 <a href="image/lijiang.jpg" title="lijiang" onclick="showPic(this);return false;">lijiang</a>24 </li>25 </ul>26 <img id="placeholder" src="image/jiuzhaigou.jpeg" alt="my image gallery"/>27 28 </body>29 </html>
1 function showPic(whichpic) {2 var source = whichpic.getAttribute("href");3 var placeholder = document.getElementById("placeholder");4 placeholder.setAttribute("src", source); 5 }
【前端积累】点击链接切换图片显示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。