Jquery/Ajax 질문 - 한 페이지에서 div의 내용을 홈 페이지의 div에로드

Question

여기에서 나를 도울 수 있기를 바랍니다. 나는 6 페이지 + 홈페이지와 함께 wordpress 사이트를 만들고있다. 6 페이지에는 #container라는 div 내에 포함 된 콘텐츠가 있습니다. 콘텐츠에는 이미지 슬라이드 쇼 등과 같이 다양한 코드를 사용하여 올바르게 작동하고 작동하는 것들이 포함됩니다.

첫 페이지에는 HTML 기반의 헤더를 통해 위젯에 삽입 한 이미지 기반 탐색 메뉴가 있습니다. 여기에 코드입니다 :

<ul id="navlist"> 
    <li id="webdesign"><a href="http://mysite.com/web-design/"></a></li> 
    <li id="branding"><a href="http://mysite.com/branding/"></a></li> 
    <li id="architecture"><a href="http://mysite.com/architecture/"></a></li> 
    <li id="writing"><a href="http://mysite.com/writing/"></a></li> 
    <li id="blog"><a href="http://mysite.com/blog/"></a></li> 
    <li id="contact"><a href="http://mysite.com/contact/"></a></li> 
</ul> 

는 내가하고 싶은 것은이 6 개 링크 중 하나를 클릭 할 때마다 시간이, 난 그냥 특정 페이지에서 사업부의 #container의 내용을로드 할 오히려 전체 페이지를로드하는 대신 홈 페이지의 div #container에 추가하거나 심지어로드하고 해당 div에서 수행하는 모든 리치 컨텐츠를 그대로 유지합니다.

저는 jquery/ajax와 관련하여 초보자입니다. 수백만 개의 코드 스 니펫을 읽었으며 그 중 일부는 절반 만 작동하고 대부분은 전혀 작동하지 않습니다. 이것이 적절한 지 여부는 알 수 없지만 사이트 페이지의 #container div에는 다양한 유형의 동적 콘텐츠를 보유하고있는 다른 div가 많이 포함되어 있습니다.

누구든지 나를 도울 수 있다면, 나는 매우 감사 할거야!

감사

엘레

Answer 1

@eleanonr, 당신은 항상 당신의 요소를위한 장소 홀더가 .html과 마지막으로 예를 들어

당신이 아약스를위한 장소 홀더

<div "ajaxResults"> </div> 

결과 한 말할 수있다

아약스가 완료되면 해당 div를 타겟팅하고 페인트하여 전체 페이지를 새로 고치지 않도록 할 수 있습니다.

$.ajax({ 
    url: "test.html" 
    success: function(results){ 
    $("#ajaxResults").html(results); 
    } 
}); 

당신이 어떤 더 furthur 도움을 당신이 그런 짓을 시도 할 수

Answer 2

을 원하는 경우 알려 주시기 바랍니다. 나는 이것이 다른 페이지의 내용을 보지 않고도 얼마나 잘 작동하는지 모르겠다.

$(function() { 

     //Stop caching if page is likely to change often 
     $.ajaxSetup({ 
      cache: false 
     }); 

     $('#navlist a').click(function (evt) { 
      //Grab url from link 
      var url = $(this).attr('href'); 
      //This will load the entire page but only select the #container 
      $('#container').load(url +' #container'); 
      evt.preventDefault(); //Stop yourself from navigating to that page 
     }); 

    }); 

    <ul id="navlist"> 
     <li id="webdesign"><a href="Secondary.aspx">webdesign</a></li> 
    </ul> 

    <div id="container"></div>