页面转换，在更改URL位置时在div中加载新页面

Question

我熟悉Ajax / jQuery .load()或php include()，可用于将其他内容加载到页面上的div中。

请看一下我发布的这个例子：my site with page transitions

我如何设置此页面，正文是屏幕的100％，没有溢出。蓝色部分为100％高度，红色部分为100％高度，从顶部100％定位。单击该按钮时，蓝色div将缩小，红色div将转换为top: 0;。

我的问题当您点击后退按钮时，它不会返回蓝色部分，它会返回上一页（蓝页）。

我的问题是如何设置它以便红色div（第二个）实际上会更改url（并使用include();或其他方法将另一个php页面加载到其中）？例如，当您单击蓝色页面上的按钮时，红色页面将显示（包含内容），并且URL将更改为：davidfateh.com/red。我意识到击中后页不会给我过渡，但至少它会回到蓝页，这是我的目标。

感谢您寻求任何建议！干杯！

Answer 1

所以基本上你会显示相同的页面，只是它的不同部分。这就是为什么回到前一页，而不是前一部分，它实际上是在同一页面上。

你可以这样做你想做的事：

1. 创建2个不同的php文件。 red.php和blue.php
2. 在每个文件中只包含您想要的部分。
3. 按钮现在必须从一个页面发送到另一个页面。如何执行此操作取决于您实现现有按钮的方式。

例如，如果按钮的实现类似于表单，请使用以下内容：

<form action="red.php">在一个中，<form action="blue.php">在另一个中。

按下按钮，它将从一页跳到另一页。