利用 JQuery的load函数动态加载页面

JQuery有好多Ajax函数，其中load是用来动态加载一个页面的内容到指定的dom元素上。

我们来做个例子：
做一个上下（左右）结构的页面，其中下左部分放2个以前我们做过的div按钮，下右部分则为动态加载内容。
按每个按钮，加载该按钮相应的网页内容到下右区域。

基本语法为：
$('#区域id').load('页面名称');

完整的网页代码如下：

< 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 ="../JsLib/jquery-1.3.2.min.js" ></ script >
     < script  type ="text/javascript"  src ="../JS/basicEffect.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 >

 

 

 rel:http://www.cnblogs.com/davidgu/archive/2009/07/30/1535185.html