需求
1，點(diǎn)擊某個(gè)鏈接時(shí)肥败，我希望能留在這個(gè)頁(yè)面而不是跳轉(zhuǎn)到另一個(gè)頁(yè)面趾浅。
2，點(diǎn)擊某個(gè)鏈接是馒稍，我希望能在這個(gè)網(wǎng)頁(yè)上同時(shí)看到那張圖片以及原有得圖片清單皿哨。
為實(shí)現(xiàn)目標(biāo)的改進(jìn)
1，通過添加“占位符”圖片的辦法在這個(gè)主頁(yè)上預(yù)留一個(gè)瀏覽區(qū)域纽谒。
2证膨，攔截跳轉(zhuǎn)，點(diǎn)擊不跳轉(zhuǎn)鼓黔，onclick = "return false"央勒。
3，點(diǎn)擊某個(gè)鏈接時(shí)澳化，把“占位符”圖片替換成那個(gè)鏈接對(duì)應(yīng)的圖片崔步。
<head>
<meta charset="UTF-8">
<title>javascript圖片庫(kù)</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是完成這項(xiàng)工作的最佳選擇井濒，寫一個(gè)函數(shù)，這個(gè)函數(shù)只有一個(gè)參數(shù)列林，即是一個(gè)圖片鏈接瑞你，通過改變“占位符”圖片的src 屬性的辦法將其替換成參數(shù)圖片
<script>
//whichpic是要點(diǎn)擊的那個(gè)a
function showPic(whichpic){
//將路徑存入變量source
var source = whichpic.getAttribue("href");
// 獲取占位符，賦值給變量
var placeholder = document.getElementById('placeholder');
//setAttribute一個(gè)屬性名席纽，一個(gè)屬性值捏悬。
placeholder.setAttribute("src",source);
// placeholder.src=source;
}
</script>
