gpt4 book ai didi

jquery - 单击 AJAX 加载菜单后如何更改 URL?

转载 作者:太空宇宙 更新时间:2023-11-04 11:26:44 26 4
gpt4 key购买 nike

我一直在关注有关如何创建通过 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com