本文介绍利用JavaScript获取图片元素并动态替换其src属性，实现在同一窗口内切换展示不同图片的方法。通过示例代码展示了如何构建列表与图片显示区的交互，用户点击列表项即可更新主图显示。
JavaScript实现同一窗口内图片切换显示
在网页开发中，实现同一窗口内浏览多张图片有多种技术方案。本例重点介绍一种基于JavaScript的操作方式：通过脚本获取目标<img>元素的src属性，并在用户交互时动态替换该属性值，从而完成图片的切换显示。具体实现逻辑与代码结构可参考后续示例。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
h1{position:absolute;margin-left:150px;}
ul{position:absolute;margin-top:50px;margin-left:80px;}
li{float:left;list-style:none;padding:1em;}
img{position:absolute;margin-top:100px;margin-left:100px;width:1000px;height:600px;}
p{position:absolute;margin-top:800px;margin-left:550px;}
</style>
<script>
function showCat(a){
var osrc=a.getAttribute("href");
var oimg=document.getElementById("img1");
oimg.setAttribute("src",osrc);
var op=document.getElementById("p1");
var otxt=a.getAttribute("title");
op.childNodes[0].nodeValue=otxt;;
}
</script>
</head>
<body>
<h1>Cat Home</h1>
<ul>
<li>
<a href="img/1.jpg" title="我是白猫咪" onclick="showCat(this);return false;">白猫咪</a>
</li>
<li>
<a href="img/2.jpg" title="我是黑猫咪" onclick="showCat(this);return false;">黑猫咪</a>
</li>
<li>
<a href="img/3.jpg" title="我是花猫咪" onclick="showCat(this);return false;">花猫咪</a>
</li>
</ul>
<img id="img1" src="img/4.jpg" alt="猫咪"/>
<p id="p1">choose Cat Photo</p>
</body>
</html>