jquery를 사용하여 내용로드

Question

여기에 문제가 있습니다. 내 인덱스 페이지에 홈/연락처/정보/Faq 및 #content div라는 4 개의 탭 메뉴가 있습니다. 각 탭을 클릭하면 결과가 #content div에 나타납니다.

홈 단추의 내용은 색인 페이지에 이미 쓰여 있지만 다른 모든 탭은 외부 페이지입니다. 다음 스크립트는 외부 페이지 만 완벽하게 호출 할 수 있습니다.

코드 : 당신이 볼 수 있듯이 당신이 질문을 클릭하면 http://jsfiddle.net/gf5US/

는 첫 번째로드에서 "홈 탭의 내용은"도시, faq.php의로드됩니다,하지만 난 갈 수 없어 홈으로. 동일한 색인 페이지 내에서 외부 페이지와 로컬 div를 결합 할 수 있도록 어떻게 수정해야합니까? (한 가지 제안은 외부 페이지를 외부 페이지로 만드는 것입니다.)

Answer 1

#content의 내용이 다른 탭의 내용으로 바뀌었기 때문에 제 생각에는 두 가지 방법 만 있습니다. 홈 페이지의 내용을 다시 가져와야합니다. 이제 Ajax 또는 일반 GET 요청을 통해 가져올 수 있습니다.

하나는 색인 준비 페이지에서 Ajax를 통해 홈 탭의 내용을로드하는 것입니다 (문서 준비 이벤트 핸들러에서 jQuery의 load 메소드를로드하여).이 경우 현재 스크립트는 그대로 작동합니다. 그러나, 나는 당신이 이것을 원하지 않는 유청을 모른다.

다른 방법은 사용자가 홈 탭을 클릭 할 때 전체 색인 페이지로드가 될 수 있습니다. 이 스크립트의 경우

$(function() { 
$('#nav a').click(function() { 
    var page = $(this).attr('href'); 
    var id = $(this).attr('id'); 
    if (id == 'home') { 
     window.location.href = "index.php"; 
    } else { 
     $('#content').load(page + '.php'); 
    } 
    return false; 
    }); 
});