利用JQuery的load函数动态加载其它页面的内容的实现代码

在线演示:http://demo.jb51.net/js/JQueryload/index.htm全部代码复制代码代码如下:<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>JQuery - Load</title> <link rel="stylesheet" media="all" type="text/css" href="../CSS/myStyle.css" /> <script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> <style type="text/css"> #header { margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #eee; } .buttonListArea { float: left; width: 150px; padding-right: 10px; border-right: 1px solid #eee; margin-right: 10px; } .buttonArea { margin: 10px; padding-bottom:20px; } #load_content { float: left; width: 550px; text-align:center; } </style> <script type="text/javascript"> $(document).ready(function() { $('#btnLoad1.button').click(function() { $('#load_content').load('loadContent1.htm'); }); $('#btnLoad2.button').click(function() { $('#load_content').load('loadContent2.htm'); }); }); </script> </head> <body> <form id="form1" runat="server"> <div id="container"> <div id="header"> <h2>JQuery Load Example</h2> </div> <div class="buttonListArea"> <div class="buttonArea"> <div class="button" id="btnLoad1">Load 1</div> </div> <div class="buttonArea"> <div class="button" id="btnLoad2">Load 2</div> </div> </div> <div id="load_content"> <h2>这是要被加载的区域</h2> </div> </div> </form> </body> </html> loadContent1.htm复制代码代码如下:jb51.netloadContent2.htm复制代码代码如下:sc.jb51.net代码打包下载

　　推荐阅读

　　在JavaScript中获取请求的URL参数

当然我们可以在后台中获取参数的值，然后在前台js代码中获取变量的值，具体做法请参考我的这篇文章:JavaScript获取后台C#变量以及调用后台方法。其实我们也可以直接在js中获取请求的参数的值，通过使用window.loc>>>详细阅读

本文标题：利用JQuery的load函数动态加载其它页面的内容的实现代码

地址：http://www.17bianji.com/kaifa2/JS/25194.html

1/2 1