需求
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>
