使用Jquery实现层的切换效果。
前台代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>传值显示Div</title>
<!-- 引入Jquery -->
<script type="text/javascript" src="Script/jquery-1.3.2.min.js" language="javascript"></script>
<!-- 样式 -->
<style type="text/css">
span{background-color:#eeeeee;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="20" width="440px" align="center">
<tr >
<td>
<span>1</span> <span>2</span> <span>3</span> <span>4</span>
<span>5</span> <span>6</span> <span>7</span> <hr />
<div id="div1" style="400px;height:200px;background-color:Red;display:block;"></div>
<div id="div2" style="400px;height:200px;background-color:#ccc;display:none;"></div>
<div id="div3" style="400px;height:200px;background-color:Green;display:none;"></div>
<div id="div4" style="400px;height:200px;background-color:Blue;display:none;"></div>
<div id="div5" style="400px;height:200px;background-color:Yellow;display:none;"></div>
<div id="div6" style="400px;height:200px;background-color:Orange;display:none;"></div>
<div id="div7" style="400px;height:200px;background-color:Purple;display:none;"></div>
</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
/*
* 遍历span,获取span的文本值
* 让所有的div先隐藏，然后根据值让所选的div淡入
*/
$("span").each(function (event) {
var num1 = $(this).html();
$(this).bind("click", function (event) {
$("div").hide();
$("#div" + num1 + "").fadeIn(1000);
});
});
</script>
</body>
</html>
效果预览：
