我的目标是:我有一个表单,它位于第1-4部分,当用户单击“下一步”按钮时我希望将内容制作成动画,然后是第2部分幻灯片等,直到表格完成。棘手的部分是我想尝试在另一个子文件夹中使用不同的PHP页面来插入其他3个部分。这也会改变用户看到的URL子文件夹。将动态内容插入到php页面并更改网址
工作示例实际上是WordPress。当您点击多部分表单时,您将看到内容和URL的行为如我所描述的。
我做了一些挖掘,看起来他们在内容上使用了React.js,但我无法真正找到任何有关如何使用React.js执行此操作的文档,所以它让我觉得它可能是自定义的Ajax/jQuery或什么。
我的文件夹的树 -
- 主
- 子文件夹-1
- 的index.php
- 子文件夹-2
- 的index.php
- 子文件夹-1
等。我能想到的唯一的事情会使用jQuery:
$(document).ready(function() {
$('#form-container').on('click', '.insert', function() {
var directory = $(this).attr('name');
$('#form-container').load('../' + directory);
return false;
});
});
我添加“下一步”按钮之类的“插入”,并给它一个name="Subfolder-2"
$('#form-container').load('../Subfolder-2);'
实际上将加载内容到没有页面刷新的div,但它不会更改URL中的子文件夹。
我在错误的轨道上吗?也许我只是没有寻找正确的东西?
我想你需要使用'window.history.pushState'来添加一个历史记录条目(并更改URL)。然后你需要使用'window.onpopstate'来处理用户点击浏览器的后退按钮。看[这个答案](http://stackoverflow.com/a/3354511/859640)。 –
谢谢你,当我今晚回到家时,我会尝试你的建议。这是有道理的。我从来没有想过使用pushState和onpopstate。 – Matthew
嗨,@JohnS,我想再次表示感谢您昨天的评论。在对'history.pushState'和'popstate'进行了相当多的研究和测试之后,我已经得到了这个功能的描述。如果您发布您的建议作为答案,我会接受它。再次感谢!你很有帮助 – Matthew