자바 스크립트 클릭 기능에 문제가 있습니다.

Question

다음 코드를 사용하면 메뉴 항목을 클릭하면 외부 HTML 파일의 내용이로드됩니다. 각 메뉴 항목을 클릭하면 각 외부 html 파일의 내용이 페이지에 남아 있습니다. 클릭하면 클릭 된 메뉴 항목의 콘텐츠 만 표시되도록하려면 어떻게해야합니까?

<script type="text/javascript"> 
     $(function(){ 
      $("#accordion1").click(function(evt){ 
       $("#course1").load("course1.html") 
       evt.preventDefault(); 
      }) 

      $("#accordion2").click(function(evt){ 
       $("#course2").load("course2.html") 
       evt.preventDefault(); 
      }) 

      $("#accordion3").click(function(evt){ 
       $("#course3").load("course3.html") 
       evt.preventDefault(); 
      }) 
     }) 
    </script> 

<div id="content"> 
      <div id="course1"> 
      </div> 
      <div id="course2"> 
      </div> 
      <div id="course3"> 
      </div> 
     </div> 

Answer 1

당신은 단순히 $().empty()를 사용하여 다른 요소를 비울 수 있지만, 나는 더 나은 솔루션 $().toggleClass('hiddenCourse') 같은이 클래스와 연관된 display:none CSS를 사용하여 가시성을 전환하는 것입니다 생각합니다.

또한 파일을 가져올 때마다 응답 속도가 느리고 네트워크 요구가 많을 때 이미 가져온 파일을 기억하고 DOM에 포함시켜야합니다.

대안으로 페이지로드시 모든 콘텐츠를 준비 할 수 있으므로 남은 작업은 가시성 전환입니다. 그것은 많은 매개 변수에 달려 있습니다 : 콘텐츠의 합이 크면 (파일의 크기와 숫자), 시작 속도가 느린 거래에서 빠른 속도의 반응 형 앱을 선호하는 경우 방문자가 열 가능성이있는 섹션 수 에.

Answer 2

html 파일을로드 할 때 다른 div의 내용을 제거하십시오. 당신은 아코디언 UI 효과

같은 것이 여기 봐, 당신은 한 번만 내용을로드 할 필요가있는 방법이 원하는처럼

Answer 3

는 것 같습니다. http://docs.jquery.com/UI/API/1.8/Accordion

으로 전화를 걸면 콘텐츠가 삭제됩니다.

Answer 4

내가 이해한다면, 당신은 다른 <div>의 밖으로 지울 :

<script type="text/javascript"> 
    $(function(){ 
     $("#accordion1").click(function(evt){ 
      $("#course1").load("course1.html"); 
      $("#course2").empty(); 
      $("#course3").empty(); 
      evt.preventDefault(); 
     }) 

     $("#accordion2").click(function(evt){ 
      $("#course2").load("course2.html"); 
      $("#course1").empty(); 
      $("#course3").empty(); 
      evt.preventDefault(); 
     }) 

     $("#accordion3").click(function(evt){ 
      $("#course3").load("course3.html"); 
      $("#course1").empty(); 
      $("#course2").empty(); 
      evt.preventDefault(); 
     }) 
    }) 
</script> 

Answer 5

당신은 수 중 하나

• 로드 새로운 내용
를 넣기 전에 다른 div의에서 빈 URL
• 새 콘텐츠를로드하기 전에 모든 div의 콘텐츠를 삭제하십시오.
• 콘텐츠를 남겨두고 CSS를 사용하여 클릭 이벤트가없는 div를 숨기기