간단한 아약스의 onclick 질문

Question

내가 사업부 상자에 결과를 표시하는 간단한 메뉴 설정에 어려움을 겪고있어 :

내가 데이터를 반환 내 서버에 PHP 파일에 링크 10 개 링크 목록을 가지고 있습니다. 뷰어가 링크 중 하나를 클릭하면 PHP 파일의 데이터가 화면의 div 상자에 표시되고 다른 링크를 클릭하면 해당 PHP의 데이터가 표시됩니다. div 상자에 파일 (이전 텍스트 대체).

나는 이것이 매우 간단하다는 것을 알고 있지만 작동시키지 못한다. jQuery를 사용하고 있으며 빠른 해결책이 있는지 알고 싶습니다.

감사합니다.

업데이트 : 저는 거의 자바 스크립트 코드에 실패했습니다. 그러나 프레임 워크의 기본 아이디어는 다음과 같습니다.

<div class="tabs"> 
     <ul class="tabNavigation" style="float:left; padding:1px;"> 
      <li><a href="#displayphpfile">Load phpfile1</a></li> 
      <li><a href="#displayphpfile">Load phpfile2</a></li> 
      <li><a href="#displayphpfile">Load phpfile3</a></li> 
     </ul> 
     <div id="displayphpfile"> 
      <p>Load phpfile1</p> 
     </div> 
    </div> 

Answer 1

jQuery에는이를 수행하는 특정 방법 인 load()가 있습니다.

나는 조금 생각하여 예를 바꿀 것, 그래서 링크의하는 HREF는 PHP 파일을 가리 키는 :

<div class="tabs"> 
    <ul class="tabNavigation" style="float:left; padding:1px;"> 
     <li><a href="phpfile1.php">Load phpfile1</a></li> 
     <li><a href="phpfile2.php">Load phpfile2</a></li> 
     <li><a href="phpfile3.php">Load phpfile3</a></li> 
    </ul> 
    <div id="displayphpfile"> 
     <p>Load phpfile1</p> 
    </div> 
</div> 

그런 다음 코드는 매우 간단하다 :

$(document).ready(function() { 
    $(".tabNavigation a").click(function() { 
     $("#displayphpfile").load($(this).attr("href")); 

     return false; 
    }); 
}); 

Answer 2

테스트 해보지는 않았지만 원하는 결과에 근접합니까?

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('a').click(function() { 
      var file = $(this).text().toLowerCase() + '.php'; 
      $.ajax({ 
       url:file, 
       cache:false, 
       success: function(response) { 
        $('#data_goes_here').html(response); 
       } 
      }); 
      return false; 
     }); 
    }); 
</script> 
<ol> 
    <li><a href="#">Foo</a></li> 
    <li><a href="#">Bar</a> 
    <li><a href="#">Baz</a></li> 
</ol> 

<div id="data_goes_here"></div> 

Answer 3

두발 상어 호출 click 요소 안에 document.ready!

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('a').click(function() { 
      var file = $(this).text().toLowerCase() + '.php'; 
      $.ajax({ 
        url:file, 
        cache:false, 
        success: function(response) { 
          $('#data_goes_here').html(response); 
        } 
       }); 
      return false; 
      }); 
     }); 
</script> 

그러나 부하 방법은 훨씬 청소기 코드 :

그것은해야합니다.