Question

我有一个非常简单的单页网站，有四个标签。单击选项卡将显示一个包含内容的div，并隐藏所有其他三个div及其各自的内容。我还使用javascript window.history.pushState更改了网址，以便我从http://www.example.com转到http://www.example.com/Tab2Title。

显然页面http://www.example.com/Tab2Title不存在，因此在更改URL后刷新页面时出现404错误。然后我意识到人们可能想要复制URL来发送它，保存它或者其他什么。有没有办法根据URL加载包含tab2内容的页面？因此，当人们加载URL时，我可以显示正确的内容，而不是404页面。

Answer 1

是的，有办法。您可以配置Web服务器以将所有选项卡URL重定向到同一页面。例如，访问http://www.example.com/Tab2Title以保持网址不变，但显示的内容与http://www.example.com/显示的内容相同。

执行此重定向的确切代码取决于您使用的Web服务器。例如，如果您有一个带有Apache，PHP站点或Ruby on Rails站点的静态网站，则会有所不同。

在JavaScript方面，您应该为该单个页面添加“DOM ready”事件处理程序。该处理程序中的代码应查看window.location的值，提取为每个选项卡更改的URL部分，并显示与其对应的选项卡。

如果您愿意更改现有网址，则可以使用更易于实施的解决方案。不要链接到http://www.example.com/Tab2Title，而是链接到http://www.example.com/#Tab2Title。在URL中，类似#Tab2Title的部分称为片段标识符，表示在#之前指向页面的一个部分的链接，该部分一次性加载。默认情况下，所有Web服务器都应将访问http://www.example.com/#Tab2Title与访问http://www.example.com/视为相同，除非页面加载时，浏览器将查找包含id="Tab2Title"的元素并滚动到该元素（如果存在）。您仍然可以使用JavaScript中的window.location来更改页面内容，如上所述，即使页面上没有包含该ID的元素。

Answer 2

在网络服务器通过＃到clientside（javascript）来处理hastag内容（因此你可以将链接传递给页面用户）这样的情况下使用#tag

http://www.example.com#Tab2Title

您可以像使用javascript一样在客户端处理标签

window.history.pushState

使用这种方法更容易，而且正是

的意思

到达已在javascript

2 个答案:

http://www.example.com#Tab2Title