javascript DOM编程艺术案例之局部图片文本更新

最新推荐文章于 2025-07-08 09:53:22 发布

原创最新推荐文章于 2025-07-08 09:53:22 发布 · 905 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #页面不跳转更新图片 #js实现局部更新

html css javascript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个简单的局部刷新案例，通过JavaScript实现点击导航项时仅更新页面中特定区域的内容，而无需重新加载整个页面。该技术利用了DOM操作来更改图片源和描述文字。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>局部刷新</title>
	<style>
	*{
		margin:0;
		padding: 0;
		text-decoration: none;
	}
	.main{
		width: 950px;
		height: 460px;
		background-color: #ccc;
		margin-top: 110px;
		margin-right: auto;
		margin-left: auto;
	}
	.left{
		margin-top: 50px;
		display: inline-block;
		width: 500px;
		height: 390px;
		border:1px solid black;
	}
	.left ul{
		width: 500px;
		height: 40px;
		margin-left: auto;
		margin-right: auto;
	}
	.left ul li{
		list-style: none;
		float: left;
		width: 140px;
		height: 40px;
		line-height: 40px;
		text-align: center;

	}
	.right{
		overflow: hidden;
		margin-left: 50px;
		display: inline-block;
		width: 300px;
		height: 390px;
		border:1px solid black;
	}
	#placehoder{
		width: 300px;
		height: 180px;
		margin-right: auto;
		margin-left: auto;
		margin-top: 50px;
		display: block;
	}
	</style>
</head>
<body>
	<div class="main">
		<div class="left">
			<ul>
				<li>
					<!--  return false 阻止href的默认跳转行为 -->
					<a href="images/11.png"  title="这是风景图1" onclick="showPic(this);return false;">风景1</a>
				</li>
				<li>
					<a href="images/12.png"   title="这变成风景图2了" onclick="showPic(this);return false;">风景2</a>
				</li>
				<li>
					<a href="images/13.png"  title="这是最后的一张风景图3" onclick="showPic(this);return false;">风景3</a>
				</li>
			</ul>
			<img id="placehoder" src="images/11.png" alt="my pictures"/>
		</div>

		<div class="right">
			<!--   一定要注意的地方是，这儿一开始不能为空，否则函数中的firstChild.nodeValue执行不了，return flase
			也就无法执行，最后就是无法阻止默认行为！ -->
			<p id="description">这是一系列风景图片</p>
		</div>
	</div>
	<script type="text/javascript">
		function showPic(whichpic){			
			var source=whichpic.getAttribute("href");
			var text=whichpic.getAttribute("title");			
			var textshow=document.getElementById("description");
			var placehoder=document.getElementById("placehoder");
			placehoder.setAttribute("src",source);
			/*还要注意的是，不能直接textshow.nodeValue=text，p中的文本内容是p的子元素！！*/
			textshow.firstChild.nodeValue=text;
		}
	</script>
</body>
</html>