2010-05-22 81 views
0

我想加載一個<div>到另一個<div>只使用jquery函數在同一頁上的內容。但是當函數觸發時,它會將整個<HTML>文檔加載到指定的<div>中。任何想法爲什麼會這樣做?我的代碼如下:Jquery加載()加載超過我想要

的Jquery:

function button1() { 
    $('#sidebar-content').fadeOut(function() { 
     $(this).load('#button1').fadeIn(); 
    }); 
} 
function button2() { 
    $('#sidebar-content').fadeOut(function() { 
     $(this).load('#button2').fadeIn(); 
    }); 
} 

HTML:

<div id="content-holder"> 
    <div id="main-content" class="float-holder"> 
     <div id="inner"> 
      <h1>BRAND TRUTH</h1> 
      <div id="flashcontent"> 
       <div id="button1"> 
        <div id="content"> 
         <h1>Brand Truth</h1> 
         <p>What this basically means is our way of working, the process involved by both ourselves and our client.</p> 

         <p>When the truth wheel process is followed, the end result is so much stronger.</p> 
        </div> 
       </div> 
       <div id="button2"> 
        <div id="content"> 
         <h1>Button 2 Content</h1> 
         <p>Some other content</p> 

         <p>Some other content x2</p> 
        </div> 
       </div> 
      </div> 
      <script type="text/javascript"> 
       // <![CDATA[ 

       var so = new SWFObject("working.swf", "working", "400", "400", "9", "#FFFFFF"); 
       so.write("flashcontent"); 

       // ]]> 
      </script> 

     </div> 
     <div id="sidebar"> 
      <div id="sidebar-content"> 
       Replace Content Here! 
      </div> 
     </div> 
    </div><!-- end #main-content --> 
</div><!-- end #content-holder --> 

回答

5

.load()是加載通過AJAX的遠程網頁的功能,你想要的是用.html(),這樣:

function button1() { 
    $('#sidebar-content').fadeOut(function() { 
     $(this).html($('#button1').html()).fadeIn(); 
    }); 
} 
function button2() { 
    $('#sidebar-content').fadeOut(function() { 
     $(this).html($('#button2').html()).fadeIn(); 
    }); 
} 

.html()沒有參數獲取html裏面,所以我們從按鈕<div>得到它,然後.html(string)設置html裏面,我們正在做的結果。