<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>演示案例</title>
</head>
<style type="text/css">
#placeholder{
300px;
height: 400px;
}
</style>
<body>
<div>
<ul>
<li>
<a href="../image/dc8d53ddly1fjsk6vwtq0j20ku0rsn26.jpg" onclick="showpic(this); return false;">图片1</a>
</li>
<li>
<a href="../image/dc8d53ddly1fqel2e5pjxj22c0340x6p.jpg" onclick="showpic(this); return false;">图片2</a>
</li>
<li>
<a href="../image/dc8d53ddly1fqw71tzljrj20qo10545h.jpg" onclick="showpic(this); return false;">图片3</a>
</li>
<img src="../image/dc8d53ddly1fqw71tzljrj20qo10545h.jpg" id="placeholder">
</ul>
</div>
</body>
<script type="text/javascript">
function showpic(whichpic){
var source = whichpic.getAttribute("href");//getAttribute() 方法返回指定属性名的属性值。
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
//setAttribute() 方法添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值。
}
</script>
</html>
//方法2
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>演示案例</title>
</head>
<style type="text/css">
#placeholder{
300px;
height: 400px;
}
</style>
<body>
<div>
<ul>
<li onclick="showpic(this,'../image/dc8d53ddly1fjsk6vwtq0j20ku0rsn26.jpg')">
<span >图片1</span>
</li>
<li onclick="showpic(this,'../image/dc8d53ddly1fqel2e5pjxj22c0340x6p.jpg')">
<a >图片2</a>
</li>
<li onclick="showpic(this,'../image/dc8d53ddly1fqw71tzljrj20qo10545h.jpg')">
<a >图片3</a>
</li>
<img src="../image/dc8d53ddly1fqw71tzljrj20qo10545h.jpg" id="placeholder">
</ul>
</div>
</body>
<script type="text/javascript">
function showpic(whichpic,imgurl){
// alert(123);
document.getElementById("placeholder").src=imgurl;
}
</script>
</html>