将html文件的内容加载到div中？

Question

首先让我说我是 javascript 的初学者。我正在处理的问题可能很容易解决；） 我正在处理一个网页，其中文本内容从外部 html 文件加载到 div 中。这是在用户单击菜单项时完成的。以下 js 代码是从外部文件加载的，运行良好：

$(文档).ready(函数(){ var api = $('.scroll-pane').jScrollPane( { 显示箭头：假， 维护位置：假 } ).data('jsp'); $('#start').bind( '点击'， 功能（） { api.getContentPane().load( '文本/start.html', 功能（） { api.reinitialise(); } ); 返回假； } ); $('#nurkowanie').bind( '点击'， 功能（） { api.getContentPane().load( '文本/nurkowanie.html', 功能（） { api.reinitialise(); } ); 返回假； } ); $('#noclegi').bind( '点击'， 功能（） { api.getContentPane().load( '文本/noclegi.html', 功能（） { api.reinitialise(); } ); 返回假； } ); $('#dojazd').bind( '点击'， 功能（） { api.getContentPane().load( '文本/start.html', 功能（） { api.reinitialise(); } ); 返回假； } ); $('#galeria').bind( '点击'， 功能（） { api.getContentPane().load( '文本/galeria.html', 功能（） { api.reinitialise(); } ); 返回假； } ); $('#linki').bind( '点击'， 功能（） { api.getContentPane().load( '文本/linki.html', 功能（） { api.reinitialise(); } ); 返回假； } ); $('#kontakt').bind( '点击'， 功能（） { api.getContentPane().load( '文本/kontakt.html', 功能（） { api.reinitialise(); } ); 返回假； } ); });

问题是页面第一次加载的时候。我希望 .scroll-pane 类的 div 加载来自“texts/start.html”的内容，这是您在单击开始链接时会得到的内容。现在那个 div 是空白的。我尝试使用如下代码：

$(文档).ready(函数(){ $('.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

我不熟悉您使用的库，但 load() 似乎是 jScrollPane 对象的函数。所以你需要调用 load 而不是普通的 div。

尝试改用这个。

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

确保它是在你定义了 api 之后。