需求
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>
<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>
网友评论