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;
            }
        );  
    });

问题是第一次加载页面时。我希望div与类.scroll-pane一起加载'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

我不熟悉您正在使用的库，但load（）似乎是jScrollPane对象的一个函数。所以你需要调用load而不是普通的div。

请尝试使用此功能。

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

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

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

2 个答案: