간단한 jQuery AJAX 질문

Question

나는 이와 같은 메뉴를 가지고 있지만 마크 업은 이런 식으로 머무를 필요가 없습니다.

<div id="menu"> 
<ul> 
    <li><a href="#item1">Item 1</a></li> 
    <ul> 
    <li><a href="#subitem1">Subitem 1</a></li> 
    </ul> 
    <li><a href="#item2">Item 2</a></li> 
</ul> 
</div> 

이러한 메뉴 항목 중 하나를 클릭 할 때마다 div에 다른 콘텐츠를로드하려는 경우 - #content라고 부릅니다.

$(document).ready(function() { 
    $('#menu li').click(function(){ 
     $('#content').load('content.txt'); 
    }); 
}); 

이제 #content에로드 할 콘텐츠 페이지를 어떻게 전달합니까? 미리 감사드립니다!

Answer 1

이벤트의 preventDefault() 메소드가있는 페이지로 이동하는 것을 방지하려면 실제로 #content div에로드 된 해당 페이지로 이동하는 링크의 href를 사용하십시오.

$(document).ready(function() { 
    $('#menu a').click(function(e){ 
     $('#content').load($(this).attr('href')); 
     e.preventDefault(); 
    }); 
}); 


<div id="menu"> 
<ul> 
    <li><a href="page1.html">Item 1</a></li> 
    <ul> 
    <li><a href="subpage1.html">Subitem 1</a></li> 
    </ul> 
    <li><a href="page2.html">Item 2</a></li> 
</ul> 
</div> 

Answer 2

다양한 방법으로이 작업을 수행 할 수 있습니다. 기본적으로 각 <li> 항목과 URL을 연결해야합니다.

은 당신이 그들을은 <li> 요소의 속성으로, 각 <li> 요소 내부에 숨겨진 입력에서 jQuery를 캐시 즉 $(selector).data에, 자바 스크립트 배열에 저장된 수있는 몇 가지 방법을 이름을합니다.

Answer 3

나는 이것을 처리하기 위해 jQuery UI's tab feature과 같은 것을 사용할 것입니다. 그것은 아마도 더 나 빠지게 될 것입니다.

이 작업을 수동으로 수행해야하는 경우 가장 쉬운 방법은 앵커에 ID 또는 rel 속성을 추가 한 다음이를 사용하여로드 할 콘텐츠 페이지를 결정하는 것입니다.

"$ (this) .attr ('blah');"를 사용할 수 있습니다. 함수 내에서 이러한 속성에 액세스 할 수 있습니다.

Answer 4

- 점진적 향상 영역에서는 링크가 해당 콘텐츠가있는 다른 페이지를 가리 키도록해야합니다.

페이지의 전체 내용뿐만 아니라 내용 요소 div에도 지정된 요소를로드 할 수 있습니다. 따라서 다른 페이지의 #content div의 콘텐츠에 다음과 같은 내용이 필요한 경우 :

$('#menu a').click(function(){ 
    $('#content').load($(this).attr('href') + ' #content'); 
}); 

트릭을해야합니다.

Answer 5

joelpittets 솔루션의 문제는 다른 페이지의 전체 내용을로드하는 것이 바람직하지 않을 수 있다는 것입니다. 그는 그러나 링크를 클릭하면 기본 동작을 취소 기억 ...