问题现象
点击对应的文字链接，图片最终不会在图片区显示照片，而是最终页面发生跳转，导致屏幕单独显示图片；
点击前:
点击后:
解决办法
在点击事件执行完后，返回return false，取消浏览器对超链接默认的事件行为；
关键代码如下：
<a href="img/海南.jpg" alt="这里是海南" onclick="return ShowPicture(this)">
在ShowPicture()函数中返回fals
</a>或者
<a href="img/海南.jpg" alt="这里是海南" onclick="ShowPicture(this); return false">
海南
</a>源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>
</title>
<link rel="stylesheet" href=""/>
</head>
<body>
<h1>
<i>美好风光</i>
</h1>
<ul>
<li>
<a href="img/海南.jpg" alt="这里是海南" onclick="return ShowPicture(this)">
海南
</a>
</li>
<li>
<a href="img/桂林.jpg" alt="这里是桂林" onclick="return ShowPicture(this)">
桂林
</a>
</li>
<li>
<a href="img/宏村.jpg" alt="这里是宏村" onclick="return ShowPicture(this)">
宏村
</a>
</li>
<li>
<a href="img/九寨沟.jpg" alt="这里是九寨沟" onclick="return ShowPicture(this)">
九寨沟
</a>
</li>
</ul>
<img id="placeholder" src="img/九寨沟.jpg" alt="这里是九寨沟" width="500px" height="400px"/>
<p id = "PictrueDescripte">这里是九寨沟</p>
<script>
function ShowPicture(whichpic){
var attrValue = whichpic.getAttributeNode("href").value;
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",attrValue);
var attrDescription = whichpic.getAttributeNode("alt").value;
var Description = document.getElementById("PictrueDescripte");
Description.innerHTML = attrDescription;
return false;
}
</script>
</body>
</html>