將html文件的內容加載到div中？

Question

首先讓我說我是一個完整的初學者，當涉及到JavaScript。我正在處理的問題可能很容易解決;） 我正在從一個網頁上的文本內容從外部html文件加載到div。這是在用戶點擊菜單項時完成的。下面的js代碼是從外部文件加載，工作得很好：

 

    $(document).ready(function(){ 
     var api = $('.scroll-pane').jScrollPane(
      { 
       showArrows:false, 
       maintainPosition: false 
      } 
     ).data('jsp');    
     $('#start').bind(
      'click', 
      function() 
      { 
       api.getContentPane().load(
        'texts/start.html', 
        function() 
        { 
         api.reinitialise(); 
        } 
       ); 
       return false; 
      } 
     ); 
     $('#nurkowanie').bind(
      'click', 
      function() 
      { 
       api.getContentPane().load(
        'texts/nurkowanie.html', 
        function() 
        { 
         api.reinitialise(); 
        } 
       ); 
       return false; 
      } 
     ); 
     $('#noclegi').bind(
      'click', 
      function() 
      { 
       api.getContentPane().load(
        'texts/noclegi.html', 
        function() 
        { 
         api.reinitialise(); 
        } 
       ); 
       return false; 
      } 
     ); 
     $('#dojazd').bind(
      'click', 
      function() 
      { 
       api.getContentPane().load(
        'texts/start.html', 
        function() 
        { 
         api.reinitialise(); 
        } 
       ); 
       return false; 
      } 
     ); 
     $('#galeria').bind(
      'click', 
      function() 
      { 
       api.getContentPane().load(
        'texts/galeria.html', 
        function() 
        { 
         api.reinitialise(); 
        } 
       ); 
       return false; 
      } 
     ); 
     $('#linki').bind(
      'click', 
      function() 
      { 
       api.getContentPane().load(
        'texts/linki.html', 
        function() 
        { 
         api.reinitialise(); 
        } 
       ); 
       return false; 
      } 
     ); 
     $('#kontakt').bind(
      'click', 
      function() 
      { 
       api.getContentPane().load(
        'texts/kontakt.html', 
        function() 
        { 
         api.reinitialise(); 
        } 
       ); 
       return false; 
      } 
     ); 
    }); 

問題是當頁面第一次加載時。我想讓class .scroll-pane的div加載'texts/start.html'的內容，這是您點擊開始鏈接時會得到的內容。現在這個div是空白的。我試圖玩這樣的代碼：

 

    $(document).ready(function(){ 
     $('.scroll-pane').load('texts/start.html'); 
    } 

但我無法得到它的工作。 有人可以給我幾個提示如何做到這一點？

在此先感謝 亞光

Answer 1

我不知道你在做什麼是這樣做的最好的方式，但你可以使用：

http://api.jquery.com/jQuery.get/

因此，像：

$.get("texts/start.html", function(data) { 
    $(".scroll-pane').html(data); 
}) 

所以使用jScrollPane你可以爲每個點擊事件做這樣的事情：

$('#start').bind(
'click', 
function() 
{ 
    $.get("texts/start.html", function(data) { 
    api.getContentPane().html(data); 
    api.reinitialise(); 
    }); 
    return false; 
    } 
); 

Answer 2

下面是一個簡單的演示，以幫助您完成任務。 這是在ie5 +，ff3 +和Op8 +中測試的。 這裏是主頁的代碼：http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/184021/loading-an-html-file-into-a-div-from-a-link

Answer 3

我不熟悉你正在使用的庫，但load（）似乎是jScrollPane對象的一個​​函數。所以你需要調用load而不是普通的div。

嘗試使用此代替。

api.getContentPane().load(
        'texts/start.html', 
        function() 
        { 
         api.reinitialise(); 
        } 
       ); 

確定它是在你定義了api之後。