更改网址并更新页面内容，无需重新加载

Question

它涉及我在网站开发方面的最后一年项目。我想改变我的网页的内容，而不重新加载页面 - 我知道这可以实现使用css/ajax或jQuery，但这只会通过隐藏和显示或replaceWith（）在jQuery中。 我希望网址也可以改变。我想实现类似这样的页面https://www.khanacademy.org/computing/computer-programming - 当用户单击INTRO TO JS：绘图和动画时，您将看到页面更改的URL和内容，但页面不会重新加载。

指南将不胜感激。谢谢

小草案：

**MY header.php** 

<script language="javascript" src="jquery-1.4.4.min.js"></script> 
 
<script> 
 
$(function(){ 
 
\t $("a[rel='tab']").click(function(e){ 
 
\t \t //e.preventDefault(); 
 
\t \t /* \t 
 
\t \t if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content; 
 
\t \t if commented, html5 nonsupported browers will reload the page to the specified link. 
 
\t \t */ 
 
\t \t 
 
\t \t //get the link location that was clicked 
 
\t \t pageurl = $(this).attr('href'); 
 
\t \t 
 
\t \t //to get the ajax content and display in div with id 'content' 
 
\t \t $.ajax({url:pageurl+'?rel=tab',success: function(data){ 
 
\t \t \t $('#content').html(data); 
 
\t \t }}); 
 
\t \t 
 
\t \t //to change the browser URL to 'pageurl' 
 
\t \t if(pageurl!=window.location){ 
 
\t \t \t window.history.pushState({path:pageurl},'',pageurl); \t 
 
\t \t } 
 
\t \t return false; 
 
\t }); 
 
}); 
 
/* the below code is to override back button to get the ajax content without reload*/ 
 
$(window).bind('popstate', function() { 
 
\t $.ajax({url:location.pathname+'?rel=tab',success: function(data){ 
 
\t \t $('#content').html(data); 
 
\t }}); 
 
}); 
 
</script> 
 
<div id='menu'> 
 
\t <a rel='tab' href='http://localhost/html5-history-api/menu1.php'>menu1</a> | 
 
\t <a rel='tab' href='http://localhost/html5-history-api/menu2.php'>menu2</a> | 
 
\t <a rel='tab' href='http://localhost/html5-history-api/menu3.php'>menu3</a></div>

我menu1.php（MENU2和3的相同代码）

<?php 
 
if($_GET['rel']!='tab'){ 
 
\t include 'header.php'; 
 
\t echo "<div id='content'>"; 
 
} 
 
?> 
 
menu1 content in menu1.php 
 
<?php 
 
if($_GET['rel']!='tab'){ 
 
\t echo "</div>"; 
 
\t include 'footer.php'; 
 
}?>

我想，当我点击链接 - 链接消失，它如果您使用的是Chrome浏览器显示只有像只“在menu1.php MENU1内容”，并没有其他的页面

Answer 1

上TEH内容，在该div上右键点击并使用选项“检查元素”。这些是Web开发人员的便利工具。你提到的链接只是一个超链接，因为它是同一个域下的非常简单的静态页面，使用相同的资源（css，js），它的加载速度非常快，你会得到一个没有页面加载的印象。

Answer 2

我相信我从复制链接粘贴的脚本解释了他们如何替换网址。跟踪使用localStorage来跟踪页面位置和其他内容的位置。转到该页面并导航到您参考的链接。然后打开控制台并键入localStorage。当你按下香蕉时，你会看到我在说什么。

您可以通过

localStorage.setItem("itemName", item) 
localStorage.getItem("itemName") 

下面这样做是源代码

<script type="text/javascript"> 
(function() { 
     // If we arrived via a Facebook callback, it might have appended #_=_ 
     // to our URL. This can confuse our Backbone routers, so get rid of it. 
     // http://stackoverflow.com/questions/7131909/facebook-callback-appends-to-return-url 
     if (window.location.hash === "#_=_"){ 
      if (history.replaceState) { 
       history.replaceState(null, null, 
         window.location.href.split("#")[0]); 
      } else { 
       window.location.hash = ""; 
      } 
     } 
    })(); 
</script> 

要更改URL，它不会重新加载整个页面