div에 html 파일의 내용을로드 하시겠습니까?

Question

먼저 자바 스크립트에 관해서는 완전한 초보자라고 말해 보겠습니다. 내가 다루고있는 문제는 해결하기가 매우 간단 할 것이다;) 텍스트 콘텐츠가 외부 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; 
      } 
     ); 
    }); 

문제는 페이지를 처음으로로드 할 때 발생합니다. 클래스 .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 객체의 기능인 것 같습니다. 그래서 평범한 div가 아닌 load를 호출해야합니다.

대신이 방법을 사용해보십시오.

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

api를 정의한 후에야합니다.