使用单个URL创建多页面设计

Question

我的目标是在一个页面中创建多个屏幕。根据操作，用户可以从一个屏幕导航到另一个屏幕。我已经共享了下面的图像

第一个屏幕

当用户点击任何类别时，它将导航到第二个屏幕。

第二个屏幕

点击它的同时它将再次回到第一个屏幕而不改变URL。我尝试创建一个完整的页面模态，但无法实现这种功能。我不确定它是否应该作为具有多个屏幕的模态完成。

请建议我可以实现的任何方法。

Answer 1

您可能指的是创建SPA或单页应用程序。这可以通过'Vanilla'JavaScript努力完成，也可以通过众多JavaScript库或框架之一完成。

Reactjs，Angular和Vuejs可能是最常见的。

如果您使用Reactjs，那么您可以使用所谓的React Router。 React Router可以非常轻松地完成您想要的操作。在Vanilla JavaScript中完成它需要大量的工作，否则会非常难看。

但是你确实问过，所以一种方法是使用JavaScript加载iFrame或制作顶级父元素display: none和另一个然后display:...

此外，如果你想要的东西不那么hacky，但不是像React或它的同行那样复杂的东西，那么请查看此链接以获取相关文章。也许这是你想要的前进道路。