Bootstrap将每个页面呈现为标签

Question

我使用bootstrap控件创建了管理面板，让我们以示例作为产品模块。因此，当用户单击产品菜单项时，它会打开产品列表，当用户单击编辑/详细信息时，我希望产品列表页保持原样，但打开编辑页面作为同一窗口中的新选项卡。我已经提到了下面的图片，你能告诉我如何使用bootsrap来实现这个目的吗？我不想使用Ajax引导选项卡和引导选项卡，因为我必须在同一页面中输入列表和详细信息的代码，这将导致性能问题，而代码将保留在不同的页面但只需将它们作为选项卡呈现在同一窗口中，用户就可以在标签之间切换并执行其操作。

Answer 1

要实现这样的用户体验，您需要依赖AJAX或新的Fetch API，否则您应该向服务器发送请求，等待服务器响应并基于该呈现所需的页面。

您要实现的UX是SPA，单页应用程序，它依赖于对服务器的AJAX调用，并根据用户请求和服务器响应修改和/或显示DOM。

您只能使用一个页面，并使用导航锚点＃隐藏/显示它的各个部分，每个部分从服务器中提取数据。比AJAX更好的是新的Fetch API，它改进了旧的XmlHttpRequest。

我强烈建议从RestFul API获取数据，这样每个调用只是一个API端点的URL，它返回JSON格式的数据，轻巧，安全，灵活。