2013-06-18 3 views
0

내가 this code을 클릭표시 사업부는

<!DOCTYPE html> 
<body> 
    <div id=div1 style="display:block;"> 
     <p id="intro">Hello World!</p> 
     <p>This example demonstrates the <b>getElementById</b> method!</p> 
    </div> 
    <div id=div2 style="display:none;"> 
     <p id="intro">Hello World again!</p> 
     <p>This example demonstrates the <b>getElementById</b> method!</p> 
    </div> 
    <button type="button" onclick="func()">Change div</button> 
    <script> 
     function func() { 
      x = document.getElementById("div1"); 
      x.style.display = "none"; 
      x1 = document.getElementById("div2"); 
      x1.style.display = "block"; 
     } 
    </script> 
</body> 

그것은 기본적으로 버튼 클릭에 DIV2를 표시합니다.

div2와 div1이 같은 파일에있을 때 제대로 작동합니다. div2가 다른 파일에 있고 URL을 변경하지 않고 버튼을 클릭하면 표시됩니다.

이것을 달성하는 한 가지 방법은 iframe을 사용하고 버튼 클릭시 iframe의 url (div2가 있음)을 변경하는 것입니다.

다른 방법이 있습니까?

저는 HTML과 자바 스크립트에 매우 익숙하므로 답변이 많은 도움이 될 것입니다. 감사!

+0

를 사용하여 PHP를! https://de.wikipedia.org/wiki/PHP – algorhythm

+0

jQuery로드를 사용할 수 있습니다 http://api.jquery.com/load/ –

+0

@algorhythm jQuery 또는 AJAX를 사용하지 않고 PHP로만 수행 할 수 있습니까? 달성하는 방법에 대한 작은 코드보다는 네가 도움이 될 것이라고 제안했다. 나는 기본적인 PHP를 알고 있지만 AJAX와 jQuery에 대해서는 전혀 알지 못한다. 이것이 PHP를 사용함으로써 만 가능할 수 있다면 나는 그 접근 방식을 취하고 싶습니다. 감사! –

답변

2

전체 페이지를로드하지 않고 페이지에서 동적으로 수행하려는 이러한 유형의 경우 AJAX를 사용해야합니다.

그리고 다음이 코드는 jQuery를 thorugh AJAX를 사용하는 몇 가지 아주 기본적인 기술 이해를 도움이 될 수

$(document).ready(function(){ 
    $("button").click(function(){ 
     alert('Load was performed.'); 
     $.get('target_file.html', function(data) { 
      $('div').html(data); 
      alert('Load was performed.'); 
     }); 
    }); 
}); 

더 구체적으로를 찾을 수있는이 같은 대상 파일에서 <div> 그 :

$("div").html(data.find("#div_id")); 

한 가지 더. 당신이 PHP를 사용하려면 여기이 게시물을 볼 수

php: Get html source code with cURL

+0

http://stackoverflow.com/questions/3592270/php-get-html-source-code-with-curl 내 문제를 친절하게 정교하게 해결합니다. 감사! –

+0

이것은 파일의 소스 코드를 얻는 방법을 알려주며 버튼 클릭시 해당 div를 인쇄 할 수 있습니다. –

+0

확인을 시도해보고 알려드립니다. 감사! –