我一直在关注有关如何创建通过 AJAX 加载菜单的网站的视频教程 (https://www.youtube.com/watch?v=ytKc0QsVRY4)。这很好，只是我希望更改 URL，以便用户可以链接到某些内容，并且还可以正确使用浏览器上的后退和前进按钮。
如何实现这一点(希望它与我已经在做的工作兼容)？
fiddle :http://jsfiddle.net/neowot/ru8potv4/
HTML:
<body>
<ul id="nav">
<li><a href="index">Home</a></li>
<li><a href="about">About Us</a></li>
<li><a href="contact">Contact</a></li>
</ul>
<div id="content">
<h1>Content</h1>
</div>
<script></script>
</body>
CSS
body{
background-color: aqua;
}
ul#nav {
list-style:none;
padding:0;
margin: 0 0 10px 0;
}
ul#nav li {
display:inline;
margin-right:10px;
}
JS
$(document).ready(function() {
//initial
$('#content').load('content/index.php');
//handle menu clicks
$('ul#nav li a').click(function() {
var page = $(this).attr('href');
$('#content').load('content/' + page + '.php');
return false;
});
});
最佳答案
在用户点击任何链接时将哈希 (#) 设置为页面 url。检查页面加载和 hashchange 事件上的 url 哈希....然后加载相应的页面。
这样您就可以为每个页面设置唯一的 url，并且浏览器来回按钮也能完美运行。
注意:javascript hashchange 事件可能无法在一些较旧的浏览器版本中工作，因此您可能想尝试任何可用的插件。
关于jquery - 单击 AJAX 加载菜单后如何更改 URL？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32322679/