更改 url 并更新页面内容而无需重新加载

Question

这与我最后一年的 Web 开发项目有关。我想在不重新加载页面的情况下更改页面的内容-我知道这可以使用 css /ajax 或 jquery 来实现，但这只能通过 jquery 中的隐藏和显示或 replaceWith() 来实现。 我希望网址也可以更改。我想实现类似这个页面https://www.khanacademy.org/computing/computer-programming - 当用户点击 INTRO TO JS:Drawing and Animation 时，你会看到页面的 url 和内容发生变化，但页面不会重新加载。

指南将不胜感激。谢谢

一个小草稿：

**MY header.php**

<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script>
$(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);
	}});
});
</script>
<div id='menu'>
	<a rel='tab' href='http://localhost/html5-history-api/menu1.php'>menu1</a> | 
	<a rel='tab' href='http://localhost/html5-history-api/menu2.php'>menu2</a> | 
	<a rel='tab' href='http://localhost/html5-history-api/menu3.php'>menu3</a></div>

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

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

当我点击链接时，我想要 - 链接消失，它只显示“menu1.php 中的菜单 1 内容”之类的内容，页面上没有其他内容

Answer 1

我相信我从链接站点复制粘贴的这个脚本解释了它们如何替换 url。为了跟踪位置，他们使用 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>

Answer 2

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