将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之后。