使用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>
效果预览: