需求：页面放置若干小图链接，点击链接后，在下方区域展示对应的大图。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm8.aspx.cs" Inherits="WebApplication1.WebForm8" %>
<!DOCTYPE html>
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="[http://libs.baidu.com/jquery/1.8.3/jquery.min.js](http://libs.baidu.com/jquery/1.8.3/jquery.min.js)"></script>
<script type="text/javascript">
$(function () {
$('a').click(function () {
var href = $(this).attr("href");
//alert(href);
$('img').attr('src',href);
return false;//取消a标签默认跳转行为
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li>
<a href="/images/01.jpg">下雨</a>
</li>
<li>
<a href="/images/02.jpg">阳光</a>
</li>
<li>
<a href="/images/03.jpg">彩虹</a>
</li>
</ul>
</div>
<div>
<img src="" />
</div>
</form>
</body>
</html>
Code language: HTML, XML (xml)说明：点击a标签触发事件，读取href大图地址，赋值给下方img的src；return false阻止a标签默认页面跳转。
Previous: jQuery – DOM操作-获得内容和属性
Next: 多个相同标记的时候进行遍历