title: Change url and update content of page without reload
body: <p>it is concerning my final year project on web development. i want to change the contents of my page without reloading the page- i know this can be achieve  using css /ajax or jquery but that would be only by hide and show or replaceWith() in jquery. 
  i want the url to be change as well. i want to achieve something like this page <a href="https://www.khanacademy.org/computing/computer-programming" rel="nofollow">https://www.khanacademy.org/computing/computer-programming</a> - when the user clicks on INTRO TO JS:Drawing and animation you will see the url and content of page changes but page does not reload.</p>
  
  <p>a GUIDE will be appreciated. thank you</p>
  
  <p>a small draft:</p>
  
  <pre><code>**MY header.php**
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script language="javascript" src="jquery-1.4.4.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function(){
   $("a[rel='tab']").click(function(e){
    //e.preventDefault(); 
    /* 
    if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
    if commented, html5 nonsupported browers will reload the page to the specified link. 
    */
    
    //get the link location that was clicked
    pageurl = $(this).attr('href');
    
    //to get the ajax content and display in div with id 'content'
    $.ajax({url:pageurl+'?rel=tab',success: function(data){
     $('#content').html(data);
    }});
    
    //to change the browser URL to 'pageurl'
    if(pageurl!=window.location){
     window.history.pushState({path:pageurl},'',pageurl); 
    }
    return false;  
   });
  });
  /* the below code is to override back button to get the ajax content without reload*/
  $(window).bind('popstate', function() {
   $.ajax({url:location.pathname+'?rel=tab',success: function(data){
    $('#content').html(data);
   }});
  });
  &lt;/script&gt;
  &lt;div id='menu'&gt;
   &lt;a rel='tab' href='http://localhost/html5-history-api/menu1.php'&gt;menu1&lt;/a&gt; | 
   &lt;a rel='tab' href='http://localhost/html5-history-api/menu2.php'&gt;menu2&lt;/a&gt; | 
   &lt;a rel='tab' href='http://localhost/html5-history-api/menu3.php'&gt;menu3&lt;/a&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>my menu1.php (menu2 and 3 are of same code)</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php 
  if($_GET['rel']!='tab'){
   include 'header.php';
   echo "&lt;div id='content'&gt;";
  }
  ?&gt;
  menu1 content in menu1.php
  &lt;?php 
  if($_GET['rel']!='tab'){
   echo "&lt;/div&gt;";
   include 'footer.php';
  }?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>i want when i click on the link - the link disappear and it displays only teh content like "menu1 content in menu1.php" only and nothing else on the page</p>