javascript - 在不重新加载的情况下更改 url 和更新页面内容

Question

这是关于我最后一年的网络开发元素。我想在不重新加载页面的情况下更改页面的内容-我知道这可以使用 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 中的 menu1 内容”之类的内容，页面上没有其他内容

Answer 1

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